CSS Sprite - what am I doing wrong?

HTML & CSS
1

Hi,

I’m trying to get a CSS sprite to work here:

http://www.cancunandrivieramaya.com/forum/

The bit next to the forum names should show a “folder” image.

The current works, but doesn’t use the Sprite:

.category-list tr.forum td.forum-name{background:url(/forum/luna/images/forum.gif) 10px 10px no-repeat;padding-top:3px;padding-bottom:3px;}

…I’m trying to use:

.category-list tr.forum td.forum-name{ 
	background-image: url(http://carmstatic.com/forum/forum_sprite.png) no-repeat; 
	background-position: -349px 0; 
	width: 22px;
	height: 19px;
	padding-top:3px;padding-bottom:3px; 
}

I know the position works ok, as if I do it with an <img tag, then it shows up fine with this CSS:

.fsprite { background: url(http://carmstatic.com/forum/forum_sprite.png) no-repeat top left; }
.sprite-forum{ background-position: -349px 0; width: 22px; height: 19px; }

Anyone got any suggestions? Hit a bit of a roadblock :frowning:

TIA

Andy

2

That’s your problem right there. The background-image property only takes the url of the image to be used. If you want to set it to be used just once, you need to set background-repeat: no-repeat;. You can only combine them if you are using plain ol’ background:.

3

Hi,

Thanks for the reply. This is a sprite image though, so how would I use that along with the image?

TIA

Andy

4

if what you are talking about is using multiple images in ONE element … that method is only supported by CSS3 capable browsers… and IE with the support of PIE. If thats ok with you then you can have multiple images like this:

.multipleImage {background: url(image.png) no-repeat top center, url(anotherimage.jpg) repeat-x bottom left,url(lastimage.gif) #red;}
note each image declaration ( containing: url, repeat, position , coordinates) must be separated by a comma. It’s my experience that if you still want a bg color it must stated ONLY on the last declaration.

Hope that helps.

5

To use image sprites, you need to ensure that the element you’re applying it as a background to is exactly the same size as the image on the sprite, and use background-position to get the right bit of the sprite showing.

6

Thanks - I ended up just converting the code to use:

http://gtmetrix.com/reports/www.cancunandrivieramaya.com/AOZjNuvv

Much simpler - and cross browser compatible :slight_smile:

Thanks for the replies though!

Cheers

Andy