CSS Sprite vertical repeat problem

Question

Hello all

I am trying to include css sprites in my webapp. The thing is I have arranged my website background vertically in sprite image. Now, one portion of the sprite needs to be repeated vertically.

I was trying the following code...

#page-wrapper {
    margin: 0px auto;
    background-image: url(../images/background.png);
    height: 100%;
    width: 1000px;
}

#page-wrapper #content {
    background-position: 0px -80px;
    background-repeat: repeat-y;
    height: 1px;
}

I am confused in the height property of content class. How should I define the height of the section which I want to repeat and the height of the div(#content)?

Regards Vikram

Answer 1

You can not repeat part of an image in the background. Setting the height only changes the height of the #content element. The images is always repeated completely.

Answer 2

You can repeat the sprite vertically if your sprites are arranged horizontally in the image.

Answer 3

Using the background-repeat property (repeat: don't use it with sprites) repeat-x or repeat-y may be what you want, depending on the dimensions of your sprite. But as the previous answer indicates: be careful with how you align the sprites because otherwise you end up with unwanted visual artifacts on your page.