Jump to content
mboehler3

Using CSS sprites for repeating background image

Recommended Posts

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?

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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;}

Share this post


Link to post
Share on other sites

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.

Edited by dsonesuk

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

.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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...