How to make header go right across the page?

StackOverflow https://stackoverflow.com/questions/18655398

  •  27-06-2022
  •  | 
  •  

Question

I want to stretch my header right across the page, view picture below:

http://gyazo.com/61982a6809817c30f882808ff55972ca.png

I originally had planned to have the banner in my wrapper, but I have now changed my mind and want it to go right across the page. I am not sure what code I have to put in to make this happen. Below is my HTML and CSS.

(I know the quality of the banner will be affected but I am not worrying about that right now)

HTML:

<body>

<div id="wrapper">

 <div id="banner">
           <a href="index.html"><img src="images/banner/banner2.png" width="1000"></a>
 </div>

CSS:

 body {
background-image:url(../images/background/fifa14.jpg);
background-repeat:no-repeat;
    background-attachment:fixed;
 }

#wrapper {
width:1000px;
margin:0 auto;
background-color:#FFF
}

Thank you very much!

Was it helpful?

Solution

You need to take your banner off the wrapper and set its width to 100%:

Change your HTML to:

 <body>

 <div id="banner">
     <a href="index.html"><img src="images/banner/banner2.png" width="1000"></a>
 </div>

 <div id="wrapper">

Add this to your CSS:

#banner img {width:100%}

OTHER TIPS

try to set the #wrapper width to 100% , do you mean you wanted set the image to full screen cross?

and the image width as well.

thank hope if helped.

HERE IS AN EXAMPLE CLICK HERE

HTML

 <body>
    <div id="wrapper">
        <a href="index.html">
            <div id="banner"></div>
        </a>      
    </div>       
 </body>

CSS

 body{background-color:slategray;margin:0;}

 #banner{    
    background: red;
    width:100%;
    height:100px;
    border-bottom:2px solid gold;
 }
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top