Jump to content
Sign in to follow this  
crashb648

Css Sprites Background

Recommended Posts

I've been using CSS sprites for a while now, mainly using it for icons, but I want to sprite up my backgrounds too. All the backgrounds I want to sprite I want to repeat Horizontally (left to right) but I can't get it too work. I know you can repeat in one direction only with CSS sprites, but it still wont work.

#header  {width: 100%; height: 215px;background:transparent url('files/site/spritebg.png') repeat top left; background-position: 0;} .sitemenu {float:left; width:690px; height:35px;  color:#FFF; font-size:13pt; background-image:url(files/site/spritebg.png); background-repeat: repeat-x; background-position: 220px 0;}

Here's two examples of the codeof two sprites I want to repeat, but both just display the image with huge gaps. Here's a link to the css image: http://i475.photobuc...48/spritebg.png Any help in getting this to work will be great. Its really getting on my nerves now!

Share this post


Link to post
Share on other sites

If you want horizontal repeat background then the sprite width needs to be only 1px wide. Now based on that screen shot you've provided I am seeing two long red and blue bars that are wider than the rest of the gradient colors. To verify for sure, just open up your sprite. If you have transparence or blank space then that is where you gap is coming from.

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...
Sign in to follow this  

×
×
  • Create New...