CSS Sprites Bottom repeating

Question

Can you bottom repeat a sprite background where I want the sprite to be set of the background on the bottom of the div. I have this:

.statistics-wrap {
    margin-top: 10px;
    background: url(../img/bg-sprite.png) repeat-x 0 -306px bottom;
    overflow: hidden;
    border: 1px #BEE4EA solid;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 10px;
}

It doesn't seem to appear, if I remove the bottom it will appear but it is set in the background repeating horizontally at the top of the div which I want it to repeat at the bottom.

Is it possible?

Answer 1

Have you tried setting bottom:0; on it's own line and removing it from background:?

Answer 2

background: url(../img/bg-sprite.png) repeat-x -306px 100%;

But i'm not sure that a sprite will be a good idea, for what i think you wish to accomplish.

Answer 3

I see something wrong with your background CSS property... I'll break it down

background:            # property name
    url(../img/bg-sprite.png) # background-image
    repeat-x           # background-repeat
    0 -306px           # background-position
    bottom             # ummm... what?!

... so the browser can't parse your CSS property. If you load this baby in Firefox and check out the Error Console ('Tools'>'Error Console') you'll see something along the lines of:

Error in parsing value for 'background'. Declaration dropped.

So I know what you're thinking... just remove 'bottom', right? But what happens then...

background:            # property name
    url(../img/bg-sprite.png) # background-image
    repeat-x           # background-repeat
    # background-position...
     0                 # x-position
     -306px            # y-position

Now your background image is offset by -306px, which may not be at the bottom of the <div>. If you're really unlucky it'll even be way past the bottom of the <div> and noone can see your background image.

So try something more like this...

background: url(../img/bg-sprite.png) repeat-x 0px bottom

or...

background: url(../img/bg-sprite.png) repeat-x -306px bottom

... depending on why you had that -306px there in the first place.