Make header full width for browsers

I have attached my design and tried to explain things

enter image description here

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

+3


source to share


3 answers


heres a finished product

Thanks, a bunch of everyone who helped.



http://colmandesigns.123abc.co.nz/dev/bni/

0


source


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/

+2


source


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>

      

+1


source







All Articles