Actually that page is broken in all browsers as they have not understood the technique they are using. If the width of the page is smaller than the width of middle content then scrolling right leaves a black space over the content. If you have 100% wide backgrounds then you must set a minimum width equal to the largest fixed width element in that page or you will lose the background.
Here’s a breakdown of how to achieve that effect (although my original demo contains most of this techniques and is a miles better).
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html,body{margin:0;padding:0}
body{background:#ccc;}
#masthead{
width:100%;
min-width:940px;/* this is important and matches the width of the fixed center element */
background:url(images/transparent.png) repeat 0 0; /* your transparent image goes here */
background:red;/* just for testing - remove this !!! */
background:rgba(255,255,255,0.3);/* just for testing - remove this !!! */
}
#site-header{
width:940px;
margin:auto;
position:relative;
min-height:132px;/* for testing only */
/* no background on this element */
}
.bgwhite{/* You could use :after instead of using this element for ie8+*/
background: white;
position: absolute;
right: 100%;
width: 1000%;
height: 100%;
}
#logo {
float: left;
width: 211px;
padding-top: 22px;
padding-bottom: 10px;
padding-right: 17px;
background: #fff;
height: 100px;
border-right: 1px solid #DBEAF9;
border-right: 1px solid rgba(98, 129, 160, 0.3);
}
</style>
</head>
<body>
<div id="masthead" class="header" role="banner">
<div id="site-header">
<div class="bgwhite"></div>
<div id="logo">Logo here</div>
</div>
</div>
</body>
</html>
#masthead holds a transparent image which allows the transparent effect and will work everywhere (at the expense of using an image). Just make a semi transparent image with a solid white portion at the top and use that to make the full width background. The site you linked to uses this image but make your own.
The white section to the left of the logo is created with this element.:
<div class=“bgwhite”></div>
It is then absolutely placed to the left and off the left side of the screen. #site-header is position:relative so the absolutel element stays track with it but still reaches all the way to the left because of the large width applied.
#site-header{
width:940px;
margin:auto;
position:relative;
min-height:132px;
}
.bgwhite{/* You could use :after instead of using this element for ie8+*/
background: white;
position: absolute;
right: 100%;
width: 1000%;
height: 100%;
}
As I said above you don’t actually need bgwhite for ie8 and above as you could have used generated content instead.
#site-header:after{/* instead of using bgwhite element */
content:" ";
background: white;
position: absolute;
right: 100%;
width: 1000%;
height: 100%;
}
That’s the basics of it.
However I would advise that you move to a max-width of 940px rather than a fixed width as these days you need to cater for a myriad of devices and if starting from scratch you should be looking to do this properly.
