Using CSS sprites for repeating background image

[mboehler3]

I have a 300px wide by 1px tall image I've put onto my sprite image and would like to have it repeat vertically. In my CSS I have this code:

.sidenavback {background-image:url('/images/global/sidenav.png'); background-repeat: repeat-x; background-position:0 -140px; width: 300px; height: 1px;}

But it's not working... every site I've been to says that it is possible to do repeating backgrounds with sprites, but it's tricky. I can't find a site that'll walk me through it. Has anyone had experience with this before?

[dsonesuk]

repeat-x (x = ax(across))will repeat horizontally not vertically, because it is set as repeat-x -140px will take out of its container and probably become hidden.

[wirehopper]

I'd use repeat-y, and overflow:hidden;.sidenavback {background-image:url('/images/global/sidenav.png'); background-repeat: repeat-y; background-position:0 -140px; width: 300px; height: 1px;overflow:hidden;}

[dsonesuk]

using images as sprites involves inserting all images such as buttons in hover, active, link state onto one images file, usually for buttons they would be placed vertically above each over. Then usinging the background postioning to show the correct state required. example three different state buttons, each 25px high, by 100 width (total image size 75px high by 100px wide), which will displayed in a container 25pxhigh by 100wide.in link state:background-position: 0 0;hover state:background-position: 0 -25px;active state: background-position: 0 -50px;you could also include socail network icons, background images to include onto this one image, and again use positioning to show as required.

[mboehler3]

using images as sprites involves inserting all images such as buttons in hover, active, link state onto one images file, usually for buttons they would be placed vertically above each over. Then usinging the background postioning to show the correct state required. example three different state buttons, each 25px high, by 100 width (total image size 75px high by 100px wide), which will displayed in a container 25pxhigh by 100wide.in link state:background-position: 0 0;hover state:background-position: 0 -25px;active state: background-position: 0 -50px;you could also include socail network icons, background images to include onto this one image, and again use positioning to show as required.

Thank you, I understand how to use sprites for buttons and such, but I'm having trouble getting this background image to repeat correctly. wirehopper's suggestion of using overflow:hidden just sort of collapsed everything. I don't understand what I'm doing wrong. The background image on the sprite is 300pixels wide by just 1 pixel tall, and it's 140 pixels down from the top of the sprite.

[dsonesuk]

.sidenavback {background-image:url('/images/global/sidenav.png'); background-repeat: repeat-x; background-position:0 -140px; width: 300px; height: 1px;}I can't figure what you are trying to do? with a height set to 1px, repeat-x, and position -140px the background image is never going to show because it is outside, 140px above the .sidenavback container.I can understand, if the height was auto, and adjusted to the height of nav links/buttons placed within it, then you would use something like.sidenavback {background-image:url('/images/global/sidenav.png'); background-repeat: repeat-y; background-position: 0 0; width: 300px;}Note: you can't use vertical positioning for vertical repeating bg images, but can use horizontal positioning. similarly you can't use horizontal positioning for horizontal repeated bg images, but, yes for vertical positioning.

[wirehopper]

Could you post some of the HTML, and a bit more of the CSS?