SitePoint Sponsor

User Tag List

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

    CSS Sprite - what am I doing wrong?

    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:

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

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

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

    TIA

    Andy

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ultranerds View Post
    Code:
    .category-list tr.forum td.forum-name{ 
    	background-image: url(http://carmstatic.com/forum/forum_sprite.png) no-repeat;}
    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. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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:.
    Hi,

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

    TIA

    Andy

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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. #5
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ultranerds View Post
    Thanks for the reply. This is a sprite image though, so how would I use that along with the image?
    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. #6
    SitePoint Addict
    Join Date
    Sep 2008
    Location
    Rudgwick, UK
    Posts
    377
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.
    Thanks - I ended up just converting the code to use:

    http://gtmetrix.com/reports/www.canc...a.com/AOZjNuvv

    Much simpler - and cross browser compatible

    Thanks for the replies though!

    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
  •