CSS sprite doing my head in!

HTML & CSS
1

Hi,

I’m trying to get some sprites working on my site:

http://www.my-free-css-templates.com/cgi-bin/page.cgi?g=Wordpress_Themes%2Findex.html

The top logo, and the banner on the right (graphicsfactory), and the “4templates” one on the right sidebar.

Now, the image is done:

.,…which was generated from this site:

http://spritegen.website-performance.org/

The 2 smaller images work fine - but the larger one just won’t play ball (its showing the top of the image, instead of just the “4templates” advert)

I’ve tried playing around with it, but its refusing to work.

The CSS for the sprite image itself, is:

.sprite { background: url(/sprite.png) no-repeat top left; }

The working code for the 2 top ones are:

<a href="/"><img src="/blank.gif" width="200" height="64" class="sprite logo">
<img src="http://www.my-free-css-templates.com/blank.gif" style="border: 1px #000 solid;" width="219" height="60"  class="sprite gfactory">

…and the one that won’t work:

<img src="http://www.my-free-css-templates.com/blank.gif" width="120" height="600" class="sprite 4templates" />

Can anyone spot the mistake? Its been driving me nuts for the last hour :frowning:

TIA

Andy

2

AAAhhhh finally got it. Was cos it didn’t like the CSS class “4templates” ( probably cos it prefixes with a number)

Changing to “template4” works a charm now <G>

Cheers

Andy

3

Ah, I see. Hmm, well, a background image on an image is fairly bizarre too! :stuck_out_tongue: :stuck_out_tongue:

Put the background image on the <center> element instead. (By the way, <center> is outdated.)

4

Hi,

It is set as a background image :stuck_out_tongue:

.sprite { background: url(/sprite.png) no-repeat top left; }

I then call it via class=“sprite whatever”

…and have the img src as blank.gif

Both the other 2 works fine - its just this one that doesnt wanna work :confused:

I tried your solution:

.4templates { background: url(/sprite.png) 0 -224px; width: 120px; height: 600px; }

…and that does exactly the same

To test it was even doing anything at all, I did:

.4templates { background: url(/sprite.png) 0 -[COLOR="Red"]124[/COLOR]px; width: 120px; height: 600px; }

…and that does exactly the same (nothing at all in terms of the positioning of the image)

Its so bizarre :frowning:

Cheers

Andy

5

An image is a “sprite” only when it is being used as a background image. So you would need to do something like

center {background: url(/sprite.png) 0 -200px;}

That -200px is just a guess.