Split an image into the breadcrumb

By | January 10, 2009

“M” asks;

Is it possible to replace “Top” with an image, and not effect the rest of the breadcrumbs; I mean not cause the colored background increase in height. Rephrasing…is it possible to overlay and image, that would replace “Top” on the breadcrumb line so that I could surround the image in a matching square or circle background that would seemlesly merge with the background stripe of the breadcrumb background color.

and supplies an image;

This is fairly easy – in short you have to split the “i” image up into three parts;

1. the middle piece which is the same HEIGHT as the breadcrumb bar.
2. the top piece
3. the bottom piece

Then use CSS to place each piece appropriately in your design.

1. middle piece goes in the breadcrumb, then indent the text of the breadcrumb
2. top piece goes at the BOTTOM LEFT of the td ABOVE the breadcrumb
3. bottom piece goes at the TOP LEFT of the td BELOW the breadcrumb

Read more about CSS at w3schools.com.

Top:

Middle:

Bottom:

More Help

I show how to do something very similar in both of my “designing oscommerce” and “oscommerce sts” ebooks. In the designing one I show how to split up an image and use css to place it in a couple of areas, and in the sts book I show how to move the breadcrumb along to suit a design. More info on these eBooks by going to oscbooks.com – and if you buy one, you get the other FREE.

Leave a Reply

Your email address will not be published.