Make header full width for browsers
I have attached my design and tried to explain things
Basically I want the header to work like a full screen image (example: http://www.flemingsteele.com/ ), but I thought about cutting the header where the white line is on my design and stretching to fit the width of the monitor ... I also want the title to be corrected.
I want the same thing to happen with my footer, which is just a matte or low opacity white stripe that I want to repeat at the bottom of the page, but I want it to be fixed to the bottom.
The middle part I was thinking has a background color and has divs inside this area. The problem I am currently having is when I add additional information to either div1 or div2, it will not scroll to the bottom because the ive: position is fixed. the reason for this is I want the divs to stay below the heading and when I scroll down the text goes to the top of the heading
I also want that if I add more information to any of the div and scoll down, I want the title to be set at the top of the browser and when I scroll down all I see is a green background color, each div with information and a fixed footer at the bottom.
Here is the coding I have at the moment.
HTML:
<body>
<img alt="full screen background image" src="images/header.png" id="full-screen-background-image" />
<div id="wrapper">
<div class="logo"><img src="images/bni_logo.png" width="200" height="128" alt="BNI Logo" border="0" /></div>
<div class="minicontainer">
<div class="title"></div>
<div id="content">
<P>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </P>
<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
</div>
</div><!--MINI CONTAINER DIV!-->
</div><!--WRAPPER DIV!-->
CSS
#wrapper {width:800px; height:auto; margin:0 auto}
.logo {margin-left:100px; margin-top:20px; background-image:url(images/bni_logo.png); background-repeat: no-repeat; width:auto; height:auto;}
#header{
width:100%;
background: url(yourimage);
}
.minicontainer {padding-left:130px; margin-top:150px; width:800px; height:auto; position:fixed;}
.title {background-image:url(images/title.png); width:255px; height:51px;}
#content {width:300px; height:auto; padding-left:5px; font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; line-height:130%;}
/* BACKGROUND IMAGE DO NOT TOUCH */
html, body {
height: 0%;
width: 100%;
padding: 0;
margin: 0;
background-color:#8cc643
}
#full-screen-background-image {
z-index: -999;
min-height: 30%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
Hope this is explained clearly enough
heres a finished product
Thanks, a bunch of everyone who helped.
http://colmandesigns.123abc.co.nz/dev/bni/
As far as my understanding goes, this is what you are trying to do to get some of the header and footer part fixed. The following code does this.
Html
<div class="header">
</div>
<div class="footer">
</div>
CSS
.header{width:100%}
.footer {
background-color: black;
bottom: 0;
float: right;
height: 30px;
left: 0;
margin-top: auto;
overflow: hidden;
position: absolute;
width: 100%;
}
Example as shown below. http://jsfiddle.net/4k2Zj/
I believe this is what you are looking for. Please tell me if I'm wrong.
CSS
* {margin: 0; padding: 0}
#wrapper {
background-image: url(http://windturbinezone.com/wp-content/uploads/2010/01/windfarm.jpg);
background-repeat: no-repeat;
background-size: 100%;
width: 100%;
height: 100%;
}
#content {
background-color: #8ac841;
background-image: -webkit-gradient(linear, left top, left bottom, from(rgb(138, 200, 65)),to(rgb(188, 252, 109)));
background-image: -webkit-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
background-image: -moz-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
background-image: -o-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
background-image: -ms-linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
background-image: linear-gradient(top, rgb(138, 200, 65), rgb(188, 252, 109));
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#8ac841', EndColorStr='#bcfc6d');
width: 100%;
height: 500px;
}
#footer {
background: green;
width: 100%;
height: 100px;
}
#div1 {
left: 100px;
top: 100px;
width: 200px;
height: 200px;
position: relative;
background-color: yellow;
display: inline-block;
}
#div2 {
left: 200px;
top: 100px;
width: 200px;
height: 200px;
position: relative;
background-color: red;
display: inline-block;
}
Html
<div id="wrapper"></div>
<div id="content">
<div id="div1">Div1</div>
<div id="div2">Div2</div>
</div>