...

View Full Version : background-position rollover issue



steveblue
12-19-2009, 05:14 AM
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. 8051

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

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


#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;

}

hdewantara
12-25-2009, 09:03 PM
Try to play around with:

background-attachment: fixed;

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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum