Jump to content

Css Sprites Background


crashb648
 Share

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!

Link to comment
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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...