SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  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,741
    Mentioned
    32 Post(s)
    Tagged
    1 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
    23,620
    Mentioned
    413 Post(s)
    Tagged
    7 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.)

  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


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
  •