How do I replace images with CSS sprite?

HTML & CSS
1

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~


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

.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

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

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:

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

.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

Thanks
I will take a look at this now. It doesn’t look simple. I have been fiddling with this for days.

5

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

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

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=[B]"button_menu"[/B]>
  <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

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-create-a-css-menu-using-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. :slight_smile: