SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS sprite doing my head in!

    Hi,

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

    http://www.my-free-css-templates.com...s%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:

    http://www.my-free-css-templates.com/sprite.png

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

    Code:
    .sprite { background: url(/sprite.png) no-repeat top left; }
    The working code for the 2 top ones are:

    Code:
    <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:

    Code:
    <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

    TIA

    Andy

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    An image is a "sprite" only when it is being used as a background image. So you would need to do something like

    Code:
    center {background: url(/sprite.png) 0 -200px;}
    That -200px is just a guess.

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    It is set as a background image

    Code:
    .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 :/

    I tried your solution:

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

    Code:
    .4templates { background: url(/sprite.png) 0 -124px; width: 120px; height: 600px; }
    ..and that does exactly the same (nothing at all in terms of the positioning of the image)

    Its so bizarre

    Cheers

    Andy

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,598
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ultranerds View Post
    It is set as a background image

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

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

  5. #5
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •