Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts

    Background image on list hover

    Here is my code:

    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>
    			</ul>
    			</div>
    Code:
    		.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?
    Attached Thumbnails Attached Thumbnails Background image on list hover-site.jpg  
    Last edited by spadez; 02-15-2009 at 05:40 PM.

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Can we have a link? At the moment, I see no reason why this would happen.

  • #3
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    The right aligning should be easy: add
    Code:
    background-position:right;
    I don't know why it insists on repeating, though. I seem to have no problems with the code you provided.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #4
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    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?)

  • #5
    Regular Coder
    Join Date
    May 2008
    Posts
    135
    Thanks
    13
    Thanked 10 Times in 10 Posts
    background-position: 5px;
    Last edited by mike182uk; 02-15-2009 at 07:34 PM. Reason: typo

  • #6
    Regular Coder
    Join Date
    Nov 2004
    Location
    The land of chocolate
    Posts
    226
    Thanks
    1
    Thanked 16 Times in 16 Posts
    You can do this by setting background-position like this:
    Code:
    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.
    Last edited by snowieken; 02-15-2009 at 07:27 PM.
    -Snow

    Susie, if you want to see your doll again, leave $100 in this envelope by the tree out front. Do NOT call the police. You CANNOT trace us. You CANNOT find us.

    Sincerely,
    - Calvin.

  • #7
    Regular Coder
    Join Date
    Oct 2006
    Posts
    197
    Thanks
    9
    Thanked 0 Times in 0 Posts
    Thank you


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •