PDA

Click to See Complete Forum and Search --> : background IE/FF

TiGGi
04-06-2006, 12:23 PM
Hi,
I got 2 part background and bottom one is giving me so problems, here it is:
div#oDiv{
background: url(/test/images/TB-BBck.jpg) repeat-x 100% bottom;
position:absolute;
min-height:800px;
top: 0;
height: 100%;
width: 100%;
}

Problem was that when you resize browser so the side scroll bars appear when you scroll down the bottom background scrolls with it so there's empty space bellow it. See attachment 1.jpg, the green (grass) is suposed to be on bottom. I added min-height:800px and that works on FireFox but not on IE.
Please help!
toicontien
04-06-2006, 01:00 PM
div#oDiv{
background: url(/test/images/TB-BBck.jpg) repeat-x fixed 100% 100%;
position:absolute;
min-height:800px;
top: 0;
height: 100%;
width: 100%;
}
Internet Explorer only supports fixed background images on the BODY tag, so the code will only work in non IE browsers.

I'd like to help you further, but I'll need to see the remaining HTML and CSS. If you've got the page online somewhere, can you please link to it?
TiGGi
04-06-2006, 01:17 PM
That didnt work, it makes same problem with FF also;

This is just a test page that has one big layout table with pics.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body{
margin: 0;
padding: 0;
color: #fffff;
height: 100%;
background-color:#89bfef;

}
div#oDiv2{
background: url(/test/images/TB-tBck.jpg) repeat-x 100% top;
position: absolute;
top: 0;
height: 400px;
width: 100%;
}
div#oDiv{
background: url(/test/images/TB-BBck.jpg) repeat-x fixed 100% 100%;
position:absolute;
top: 0;
height: 100%;
width: 100%;
}
div#maintbl{
position:relative;
height: 95%;
width: 750px;
margin-left: auto;
margin-right: auto;
z-index:1;



}
.style1 {color: #000000}
-->
</style>
</head>

<body>
<div id="maintbl"><table id="Table_01" width="775" height="787" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2">
<img src="images/TB-NEW-Main_01.jpg" width="261" height="11" alt=""></td>
<td rowspan="2">
<img src="images/TB-NEW-Main_02.jpg" width="513" height="23" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="11" alt=""></td>
</tr>
<tr>
<td colspan="2" rowspan="5">
<img src="images/TB-NEW-Main_03.jpg" width="261" height="469" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="12" alt=""></td>
</tr>
<tr>
<td>
<img src="images/TB-NEW-Main_04.jpg" width="513" height="49" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="49" alt=""></td>
</tr>
<tr>
<td>
<img src="images/TB-NEW-Main_05.jpg" width="513" height="350" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="350" alt=""></td>
</tr>
<tr>
<td>
<img src="images/TB-NEW-Main_06.jpg" width="513" height="16" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="16" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/TB-NEW-Main_07.jpg" width="513" height="285" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="42" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/spacer.gif" width="24" height="307" alt=""></td>
<td>
<img src="images/TB-NEW-Main_09.jpg" width="237" height="243" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="243" alt=""></td>
</tr>
<tr>
<td colspan="2" bgcolor="#171516">&nbsp; </td>
<td>
<img src="images/spacer.gif" width="1" height="64" alt=""></td>
</tr>
</table>
</div>
<div id="oDiv2"></div>

<DIV ID="oDiv"></DIV>

</body>
</html>
TiGGi
04-06-2006, 01:19 PM
Actualy here it is: http://www.regencyhomes.com/test/2.cfm
toicontien
04-06-2006, 03:04 PM
Sorry about that. I understood you in the exact opposite way you wanted me to :)

Move the background to the BODY element and use the fixed background position. It should work then.