I have attached my design also to try and explain things Pretty much I

Question

0

Editorial Team

Asked: May 31, 20262026-05-31T19:12:33+00:00 2026-05-31T19:12:33+00:00

I have attached my design also to try and explain things Pretty much I

0

I have attached my design also to try and explain things

enter image description here

Pretty much 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 have it stretch so it will fit all monitor widths. I also want the header fixed.

I want the same to happen with my footer which is just a frosted or low opacity white bar which I want to repeat along the bottom of the page but I want it fixed to the bottom.

The middle part I was thinking of having it as a background colour and have divs inside that area. The problem I have at the moment is whenever I add more information to either div1 or div2 it wont scroll down because ive used position:fixed . the reason for this is I want the divs to stay below the header and when I scroll down the text goes overtop of the header

I also want it so if i add more information into either of the divs and scoll down I want have the header fixed to the top of the browser and when I scroll down all i’ll see is the green coloured background, each div with the information and the fixed footer at the bottom.

Heres 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's 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