detta problem gäller FF och Opera. om jag förminskar webläsaren så fyller bara DIVen (#main) ut bakgrunden till webläsarens storlek, scrollar man sedan neråt fortsätter innehållet utan bakgrund. maximerar man sidan så fyller bakgrunden ut hela sidan igen. så här ser koden ut:
CSS:
----------------------------------------
html, body {
height: 100%;
margin: 0;
padding: 0;
background-image:url(img/bg-1.gif);
background-repeat: repeat;
background-color: #545454;
}
#container {
height: 100%;
width: 690px;
margin: 0 auto;
border: 5px solid black;
border-top: 0;
border-bottom: 0;
background-color: #727272;
text-align: left;
}
#top {
height: 150px;
color: #fff;
background-image:url(img/top.jpg);
background-repeat: no-repeat;
background-color: #727272;
}
#main {
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
margin-bottom: 20px;
}
HTML:
----------------------------------------
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<title>Scott Kelly - The official website.</title>
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="container">
<!-- MENU -->
<div id="top">
<img src="img/null.gif" style=" width: 690px; height: 20px; border: 0;" />
<a href="pages/main.htm"><img src="img/null.gif" style="width: 300px; height: 20px; border: 0;" /></a>
<img src="img/null.gif" style=" width: 25px; height: 20px; border: 0;" />
<a href="pages/news.htm" class="menu"><img src="img/button-1.gif" style="height: 20px; border: 0;" /></a>
<a href="pages/about.htm" class="menu"><img src="img/button-2.gif" style="height: 20px; border: 0;" /></a>
<a href="pages/kmbt.htm" class="menu"><img src="img/button-3.gif" style="height: 20px; border: 0;" /></a>
<a href="pages/bat.htm" class="menu"><img src="img/button-4.gif" style="height: 20px; border: 0;" /></a>
<a href="pages/merch.htm" class="menu"><img src="img/button-5.gif" style="height: 20px; border: 0;" /></a>
</div>
<!-- / MENU -->
<!-- CONTENS -->
<div id="main">
</div>
<!-- / CONTENS -->
</div>
</body>
</html>