View Full Version : Background image on list hover

02-15-2009, 04:34 PM
Here is my code:

<div id="skills" class="positioning">
<div class="inside">
<img src="images/title_skills.gif" alt="Skills" />
<div class="header"></div>
<div class="text">
<ul id="purple">
<li><b>Graphics</b> - Photoshop, Flash, Illustrator, Corel Draw</li>
<li><b>CAD</b> - Pro Engineer, Alias, 3Ds Max, AutoCAD</li>
<li><b>Office</b> - Word, Powerpoint, Excel, Access, Windows, Linux</li>
<li><b>Workshop</b> - Metal, Plastics, Wood, Fabrication, Model Making</li>

.inside .text ul#purple li:hover {
background-color: #7110A3;
background-image: url(../images/plus.gif);
background-repeat: no-repeat;
color: #E8BFFD;

What I am trying to do is get an image to come up on the far right of the list row when a user hovers over it. With the posted code the image not only doesnt right align, but it repeats itself?

02-15-2009, 05:38 PM
Can we have a link? At the moment, I see no reason why this would happen.

02-15-2009, 05:45 PM
The right aligning should be easy: add


I don't know why it insists on repeating, though. I seem to have no problems with the code you provided.

02-15-2009, 06:10 PM
Thank you, its working now, I guess it just needed a force refresh. Can someone tell me how I can put an indent on the image (so it sits slightly left of far right by about 5px?)

02-15-2009, 06:18 PM
background-position: 5px;

02-15-2009, 06:25 PM
You can do this by setting background-position like this:

background-position: 200px (center);

Center is not necessary in this case. Background-position takes two values, the x position followed by the y-position. If you only specify one value, the second value is automatically set to center, I believe.

200px is of course an example, since I have no idea what the width of your list items or their containing div is set at. To display your image 5px from the right, take your list items or div width and subtract it by 5. If the list items cover the entire page, you can also use percents. Setting the background-position to 99%, for instance, places the image one percent away from the right side.

Good luck tweaking!

EDIT: Mike, the starting position of background-position is 0px 0px from the top left (basically like any positioning in css). So setting it to a negative value actually pushes it further to the left.

02-15-2009, 06:25 PM
Thank you :)