Split page background

Hi

Currently I’m having an issue I need an index page to look like the following http://www.clhdesigns.com/images/homepage.jpg

Now the issue here is that the background must stretch across the entire page.
I’m not sure how about how to go about this.

If using a bg image, make it very wide (say 1800px) and 10px in height. Make one half purple and the other half black (or whatever that color is).

Then use this css:


body {
    background: url(/images/background.gif) repeat-y 50% 0;
}

repeat-y will make the image repeat down the page, and the 50% 0 setting will center the image in the middle of the page and start it repeating from the top.

Hope that helps. :slight_smile:

Hi,
As ralph suggested a BG image would be very effective in this situation. If you did not want to go that route for some reason you could do it with an absolute positioned div layered under an inner wrapping div. That would be set at 50% width and 100% height. You would need to set a min-height:100% on the main wrapper.

Like so -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Split Background</title>
<style type="text/css">
* {margin:0;padding:0;}
body {
background:#221E1F;/*right side BG color*/
font-size:100%;
}
body,html{height:100%}

#wrapper {
position:relative;
min-height:100%;
background:#221E1F;/*right side BG color*/
}
* html #wrapper {height:100%}/*IE6 min-height*/

#inner{
width:100%;
overflow:hidden;/*contain inner floats*/
position:relative;
z-index:2;
}
#header{
height:180px;
margin:60px 0 0;
background:#FFF;
}
#left{
float:left;
width:50%;
margin-right:-1px;
}
#right{
float:right;
width:50%;
text-align:right;
}
#bg-2{
position:absolute;
width:50%;
height:100%;
left:-2px;
bottom:0;
background:#5A2575;/*left side BG color*/
border-right:2px solid #65626D;
}
* html #bg-2{height:999em;}/*IE6 only*/

p{color:#FFF; font-size:3em;padding:20px;}
</style>
</head>
<body>
<div id="wrapper">
    <div id="inner">
        <div id="header"></div>
        <div id="left">
            <p>Left Side</p>
            <p>Left Side</p>
            <p>Left Side</p>
        </div>
        <div id="right">
            <p>Right Side</p>
            <p>Right Side</p>
            <p>Right Side</p>
        </div>
    </div>
    <div id="bg-2"></div>
</div>
</body>
</html>