I also have a wrapper that is 950px wide to centre all my content. The header background graident sits out side of this as i want that to repeat across the whole display.
My problem comes however when the screen resolution is smaller than 950px the header background gradient doesnt repeat out very well. It only repeats to how bit the resolution is, so for instnace it could show for 450px but then the other 500px would be blank, while the rest of my content is shown below, because of the wrapper.
My code is -
HTML
Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8"/>
<title>Untitled Document</title>
</head>
<body>
<!-- Header Section -->
<div id="header">
<div id="headerTop"></div>
<div id="headerBottom">
<div class="wrapper">
<div id="headerTopNav">
<div id="headerTopNavLeft"></div>
<div id="headerTopNavMiddle"></div>
<div id="headerTopNavRight"></div>
</div>
</div>
</div>
</div>
<!-- Close Header Section -->
<div class="wrapper">
<div id="bodyContainer">sdf</div>
</div><!--Close Wrapper-->
</body>
</html>
Code: Select all
@charset "utf-8";
/* CSS Document */
body{margin:0px; padding:0px;}
.wrapper {width: 950px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto;}
#header{width:100%; height:125px; background:yellow; overflow:visible;}
#headerTop{width:100%; height:25px;
background-color:#1E72BA;
background-image: -moz-linear-gradient(bottom , #1E72BA, #1A4E70 60px);
background-image: -webkit-linear-gradient(bottom , #1E72BA, #1A4E70 60px);
background-image: -o-linear-gradient(bottom , #1E72BA, #1A4E70 60px);
background-image: -ms-linear-gradient(bottom , #1E72BA, #1A4E70 60px);
background-image: linear-gradient(bottom , #1E72BA, #1A4E70 60px);}
#headerBottom{width:100%; height:100px;
background-color:#E0E0E0;
background-image: -moz-linear-gradient(bottom , #E0E0E0, #FFFFFF 60px);
background-image: -webkit-linear-gradient(bottom , #E0E0E0, #FFFFFF 60px);
background-image: -o-linear-gradient(bottom , #E0E0E0, #FFFFFF 60px);
background-image: -ms-linear-gradient(bottom , #E0E0E0, #FFFFFF 60px);
background-image: linear-gradient(bottom , #E0E0E0, #FFFFFF 60px);}
#headerTopNav{height:35px; overflow:auto; float:right;}
#headerTopNavLeft{width:30px; height:35px; float:left; border-radius:0 0 0 35px;
background-color:#1E72BA;
background-image: -moz-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: -webkit-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: -o-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: -ms-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: linear-gradient(bottom , #1A4E70, #1E72BA 30px);}
#headerTopNavRight{width:30px; height:35px; float:right;border-radius:0 0 35px 0;
background-color:#1E72BA;
background-image: -moz-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: -webkit-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: -o-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: -ms-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: linear-gradient(bottom , #1A4E70, #1E72BA 30px);}
#headerTopNavMiddle{min-width:300px; height:35px; overflow:auto;float:left;
background-color:#1E72BA;
background-image: -moz-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: -webkit-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: -o-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: -ms-linear-gradient(bottom , #1A4E70, #1E72BA 30px);
background-image: linear-gradient(bottom , #1A4E70, #1E72BA 30px);}
#bodyContainer{width:100%; min-height:300px; overflow:auto; background:#ccc;}Is there any simple fix?
I would rather not use an image as the heaader and attach it to the body as i need to do this process in other places aswell
Thanks