Background repeat-y [Archive]

apotd

05-28-2012, 08:10 PM

Hi! I have two backgrounds, but "background2.gif" (which I put on repeat-y) stops repeating if my page is longer than my browser and I scroll down. This is because I have this CSS:

* {
margin: 0;
padding: 0;
}

html {
background-image: url('../images/background1.gif');
}

html, body{
height: 100%;
}

body {
background: url('../images/background2.gif') repeat-y center;
min-height: 100%;
font-size: 13px;
color: #4a4a4a;
line-height: 25px;
}

#pagewrapper {
margin: 0 auto -92px;
min-height: 100%;
height: 100%;
height: auto !important;
}

#content {
margin: 0 auto;
padding: 5px 35px 5px 35px;
width: 720px;
min-height: 62%;
position: relative;
overflow: hidden;
/*background: #ffffff;*/
zoom: 1;

#footercontainer {
height: 92px;
}

footer {
margin: 0 auto;
width: 100%;
height: 92px;
background: url('../images/footer/footerbg.png') repeat-x;
background-position: left bottom;
}
}

To be more specific, because of the
"html, body{
height: 100%;
}"
part.

If I change this to min-height, everything works perfectly in Opera, but in other browsers, such as Firefox, my footer doesn't work anymore (it won't stay at the bottom).

How can I make the second background repeat at y through my entire page and keep the footer down?

Oh, and this is my HTML part:
<?php session_start(); ?>

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>title</title>
<link rel="stylesheet" href="stylesheet.css" />
</head>

<body>

<div id="pagewrapper">

<div id="loginblock">
<?php include_once('includes/loginblock.php'); ?>
</div>

<header>
<?php include_once('includes/header.php'); ?>
</header>

<div id="content">
text
</div>

<div id="footercontainer">
</div>
</div>

<footer>
<?php include_once('includes/footer.php'); ?>
</footer>

</body>

</html>

Xherdas

05-28-2012, 09:28 PM

Try this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>title</title>

<style type="text/css">
#bg_top{
background-position:center top;
background-repeat:repeat-y;
background-color:#f00;
}

#bg_bottom{
height: 400px;
background-position:center bottom;
background-repeat:no-repeat;
background-color:#000;
}
</style>
</head>

<body>
<div id="bg_top">
Hellow World!!!!<br />
Hellow World!!!!<br />
Hellow World!!!!<br />
Hellow World!!!!<br />
Hellow World!!!!<br />
Hellow World!!!!<br />
Hellow World!!!!<br />
Hellow World!!!!<br />
Hellow World!!!!<br />
Hellow World!!!!<br />
</div>
<div id="bg_bottom"></div>
</body>
</html>