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