SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How do I replace images with CSS sprite?

    Hi~
    Please help.

    I want to replace images in my index.css with a CSS sprite. I made a sprite with a generator. Here is a bit of code from it.
    Please help~
    Code:
    .sprite-hover{ background-position: 0 0; width: 14px; height: 35px; }
    .sprite-left-bg{ background-position: 0 -85px; width: 232px; height: 1px; }
    
    #container li {
    background: url(csg-4f2d90ebaef03.png) no-repeat top left;
    }
    This is the former image in the css file:
    Code:
    .button_menu ul li a:hover{background:url(../images/hover.jpg); color:#000;}
    How do I replace this hover.jpg image with the sprite?

    I have read a bunch of tutorials, but they all say something about the html. Which I don't understand since the images in the current css never made a reference to the html before. The whole index.css does but not individual images.

  2. #2
    SitePoint Member devilthemes's Avatar
    Join Date
    Jan 2012
    Posts
    10
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS Sprit is the process of loading all images in single image file and it can be show by changing background-position. Your code so more complecated to understand. Please take a referench http://www.w3schools.com/css/css_image_sprites.asp.

  3. #3
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Sprites, specially complex ones like the one you may get from a generator only work in certain situations.
    CSS Sprit is the process of loading all images in single image file
    Simplified version of what you need to do is create a rule with all the SELECTORS to which you intend to use the sprite.

    example:
    Code:
    .someClass,  .item div, #myLogo, #anImage div, .list li a, .list li a:hover{background-image:url(../images/mySprite.png); background-repeat:no-repeat;}
    Then you just adjust the BACKGROUND-POSITION in each of the elements as needed.
    Code:
    .list li a{ background-position: 0 0; width: 14px; height: 35px; }
    .list li a:hover{ background-position: 0 35px; width: 14px; height: 35px; }
    Note how I moved the VERTICAL position 35px up, if the hover state of .list li a was right below the regular state you will get the desired action.

    As you can imagine sprites are VERY tricky and limited for repeating background and do not work for elements undefined dimensions.

  4. #4
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Sprites, specially complex ones like the one you may get from a generator only work in certain situations.


    Simplified version of what you need to do is create a rule with all the SELECTORS to which you intend to use the sprite.

    example:
    Code:
    .someClass,  .item div, #myLogo, #anImage div, .list li a, .list li a:hover{background-image:url(../images/mySprite.png); background-repeat:no-repeat;}
    Then you just adjust the BACKGROUND-POSITION in each of the elements as needed.
    Code:
    .list li a{ background-position: 0 0; width: 14px; height: 35px; }
    .list li a:hover{ background-position: 0 35px; width: 14px; height: 35px; }
    Note how I moved the VERTICAL position 35px up, if the hover state of .list li a was right below the regular state you will get the desired action.

    As you can imagine sprites are VERY tricky and limited for repeating background and do not work for elements undefined dimensions.
    Thanks
    I will take a look at this now. It doesn't look simple. I have been fiddling with this for days.

  5. #5
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What's the trick with getting the positioning right? How do you integrate it with the previous background code? Sometimes the image shows correctly, but moves the stuff around it. Or sometimes parts of other images in the sprite show.

    Like here's some code: .sprite-log-in-arrow{ background-position: 0 -368px; width: 8px; height: 7px; }

    How do I insert that position into this (code before the sprite): .login a{display:block; background-image: url(../images/log-in-arrow.jpg); background-repeat: no-repeat; background-position: left 4px; padding-left:12px; font-size:11px; color:#646464; text-decoration:none;}

    I tried this and the image showed but moved the stuff around it. .login a{display:block; background-image: url(../images/spritesgen.png); background-repeat: no-repeat; background-position: 0 -368px; width: 8px; height: 7px;left 4px; padding-left:12px; font-size:11px; color:#646464;text-decoration:none;}

    That kinda worked-the image showed, but it moved the other stuff.

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    It would be better if you could show us your HTML too ... and preferably a live link, as it's hard to understand what's going on without the image. Is there a test page you could link us to? (If you have a website, just create a test page somewhere.)
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  7. #7
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your reply. This sure is difficult. I appreciate your help. Here's a sample of the html from the index.php template:

    <div class="button_menu">
    <div class="left">
    <div class="right">
    <?php if($user->gid > 0){ ?>
    <jdoc:include type="modules" name="user3" />
    <? } else {?>
    <jdoc:include type="modules" name="top2" />
    <? } ?>
    </div>
    </div>
    </div>
    </div>
    <div id="middle">
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <?php if($_REQUEST['view']=="frontpage"){?>
    <td class="home-left" valign="top" align="left">
    <jdoc:include type="modules" name="left3" />
    <div class="homeleft-box">
    <div class="top">
    <div class="bottom">

    The "button_menu" and "homeleft-box" are the two things that I am replacing with the sprite. Maybe these kinds of images can't work with a sprite. My site is: esl in side r (dot) com

    Thanks

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,118
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    What you really want here is to have a background image with a normal state and a hover state. So in the normal state, the normal background should show on the <a>, and then on hover the image position moves so that a different part of the image shows.

    At the moment, in the normal state, you have a separator as the background image. You would be better off moving this separator image to the LIs, so that you can put the sprite image on the normal state of the anchor too.

    Here is an example of how sprites can work:

    http://line25.com/tutorials/how-to-c...-image-sprites

    It's more complex than what you are doing, as your sprite doesn't include the text, so you only need a very small, simple image. But it might at least make it a bit clearer how sprites work.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."


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
  •