CSS Sprite Help

Question

Hello,

I was originally using the following code:

background-image: url(../images/tabbottom.gif);
background-repeat: no-repeat;
background-position: left bottom;

The problem is when I convert it to a sprite, I have a fixed background-position, say 0px -400px;

Now how do I place it at the left bottom then?

Also, can I use background-repeat with a css sprite?

Thank you for your time.

Answer 1

Now how do I place it at the left bottom then?

By knowing the pixel dimensions of the element and positioning it carefully

Also, can I use background-repeat with a css sprite?

Sure - so long as you only repeat in one direction and your sprites are arranged in a line (not a grid).

Answer 2

background-repeat will not play nicely with your css sprite. nor will setting it to bottom left. Unfortuantely the only way around this is to use static width and height. In this case, you're better off not using the sprite