Split background

HTML & CSS
1

My 1000px wide content is centered in the browser, is there a way to have the background color split so that when a browsers is wider than 1000px the left half is one color and the right half another color?

thanks

nick

2

Hi,
Yes that can be done, it will require an extra div though if you want to support all browsers since CSS2.1 only allows one BG per element.

Something like this may be what you are looking for (ignore the opacity on the header)
http://www.css-lab.com/demos/multi-bg/dual-top-bg.html

I was only using the body element for a BG color on that example but one of the BG images could actually have been set there and I could have eliminated the nested div (in red) for my split BG.

<div id="bg-lt"><!--sits outside of #wrap div-->
    [COLOR=Red]<div id="bg-rt"></div>[/COLOR]
</div>
3

What caught my eye is the " top:0;right:0;" which is not a float it’s positioning which I didn’t know existed!:slight_smile:

4

Hi,
Yes, this is one of those situations where it is best to use AP (absolute positioning). AP elements are removed from the normal page flow, other elements that are in the normal flow are blind to them. That do not know that the AP element is there, we don’t want the extra background div pushing the main page container around so it gets removed from the flow.

What you were wanting to do is really as simple as this:

<!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>Dual Background Images with CSS2.1</title>

<style type="text/css">

body,html {height:100%}

body {
    margin:0;
    padding:0;
    background:blue;
}
#bg-rt {
    position:absolute;/*remove from page flow*/
    top:0;right:0;
    height:100%;
    width:50%;
    background:lime;
}
#wrap {
    width:1000px;
    min-height:100%;
    margin:0 auto;
    position:relative;/*auto stack above AP #bg-rt div*/
    background:#FFF;
}
h1 {
    margin:0;
    padding:1em 0 0;
    text-align:center;
    font:bold 1.5em/1.3 arial;
}
</style>

</head>
<body>

<div id="bg-rt"></div><!--sits outside of #wrap div-->

<div id="wrap">
    <h1>Dual Background Images with CSS2.1</h1>
</div>

</body>
</html>
5

That do not know that the AP element is there

Well that didn’t make any sense did it :slight_smile:

Too late to edit my post, “That” should have been “They”. Meaning the other elements in the page flow.

They do not know that the AP element is there, …

You can learn more about Positioning in the SitePoint CSS Reference.