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

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.