Question

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.