Using Image Sprites

The alignment text in CSS can be very confusing to describe and I'll try my best!

Sprites are usually used for selecting which area of an image to show... I'll provide some examples below:

Box Borders

Here is an example of how I use two images to make my box borders on my test site:

Image 1 (vertical)	Image 2 (horizontal)

Actually the bottom part of Image 2 is used for my tab button borders.

The CSS can be used to grab the parts of the image needed for each border.

.lefttile { background: url(wowgrey1.png) left top repeat-y; width:9px; }
.topleft { background: url(wowgrey1.png) -9px top no-repeat; height:43px; width:15px; }
.topright { background: url(wowgrey1.png) -24px top no-repeat; height:43px; width:15px; }
.righttile { background: url(wowgrey1.png) right top repeat-y; width:9px; }

.bottomleft { background: url(wowgrey1.png) -9px bottom no-repeat; height:13px; width:15px; }
.bottomright { background: url(wowgrey1.png) -24px bottom no-repeat; height:13px; width:15px; }

.toptile { background: url(wowgrey2.png) left top repeat-x; height:43px; }
.bottomtile { background: url(wowgrey2.png) left -24px repeat-x; height:13px; overflow:hidden; }

Below is an explaination of each line of the CSS above:

• First off, the borders are split into two images for a reason. All vertical or square images are put into the first image and all horizontal images are placed in the second. If you place a vertical image with a horizontal image (or vice-versa) you would not be able to repeat the image... you'll end up with the other image in the repeated portion or a gap in your repeat. Also note that the portion of the image you want to repeat, must go all the way across the image... the lefttile and righttile are the full height of the first image.


• When you define a sprite starting point in the CSS, the top left corner of the image is defined at point "0px 0px" or "left top". As you move to the right and down inside the image, the numbers become more negative...


• In the ".lefttile" CSS class definition, you'll see that it is set to "left top" with the image repeated in the "y" (vertical) direction "repeat-y". The CSS only sets width of the image (9px). The height is not set since it repeats in that direction.


• In the ".topleft" definition, the corner starts 9 pixel from the left image edge. So, the sprite pointer is set to "-9px top". And since this is a corner and not repeated, the "no-repeat" is included. The height and width of the image to display is set at 15 pixels wide by 43 pixels tall. Note that the sprite pointer points to the top left corner and the height and width tells it how far right and down to move.


• The ".topright" definition starts 24 pixels from the left edge. This pointer is thus set to "-24px top". The remaining defition is set the same as the "topleft" class.


• The ".righttile" definition is a little different. Since it sits on the right edge, you can set the sprite pointer to the top right corner "right top". Oddly, setting the image size to 9px will set it to display starting from the top right and moving left 9 pixels. You can also acheive the same results with setting the pointer to "-39px top", if you wish to be consistent.


• The ".bottomleft" definition is the part of the image that is 9 pixels in from the left and 43 pixels down. So this is another case where you can set the sprite pointer to either "-9px bottom" or "-9px -43px". The bottom left corner image is 15 pixels wide and 13 pixels tall and is not repeated.


• The ".bottomright" definition is the same as the left, but is 24 pixels over from the left. So you could select the correct image to display using "-24px bottom" or "-24px -43px".





so you'll see negative numbers in the CSS

So the height and width of the CSS class is actually telling the browser how much of the image to display... if the container some how gets stretched, more of the background image will be revealed, which is undesirable.

Complete box:

TITLE     This is where my content would be placed