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 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Dec 2009
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    background-position rollover issue

    Hello all,

    I'm making a new portfolio for my artwork using HTML/CSS. I've got the basic layout finished for the gallery but there is just one issue. I am attempting a CSS rollover by giving a div a background-image on hover. I only want the background image to cover 20% from the bottom of the rollover so I can display the title of the work. This is a liquid layout, so fixed pixel values are not gonna work. I can get the rollover to appear correctly @ 1440x900 screen res when background-position: 0px 180px; but what I want is background-position: 0% 80%; Why won't the percentages work in this case?

    The code is below but I've also attached the site as a zip. csshelp.zip

    splash.html has the div tags, boxes.css has the rollover styles at the bottom of the file.

    heres am image of how the rollover should appear (in the top right)
    background-position rollover issue-picture-4-2-.jpg

    thanks for helping, this is my first post so I will attempt to help others too!

    Code:
    #roll {
    				
    	width: 100%;
    	height: 100%;
    	
    	position:relative;
    	display:block;
    	
    	bottom: 0px;
    	
    	cursor:crosshair;
    	
    	overflow:hidden;
    	
    	
    	font-family:"Courier New", Courier, monospace;
    	font-size:12px;
    	color:#DDD;
    	text-align:left;
    	text-indent: 8px;
    	
    	background-image:none;
    	background-repeat:no-repeat;
    	
    	}
    
    
    #roll:hover {
    	
    	background-image:url(../img/box_roll.png);
    	background-repeat:no-repeat;
    	background-position: 0% 80%;
    	overflow:hidden;
    	
    	}
    Last edited by steveblue; 12-19-2009 at 04:22 AM.

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    346
    Thanks
    9
    Thanked 51 Times in 50 Posts
    Try to play around with:
    PHP Code:
    background-attachmentfixed
    A suggestion:
    Since there are lot of same id elements in your page,
    why don't group them into same class,
    (e.g: class="roll" instead of id="roll").


  •  

    Posting Permissions

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