Html – How to make header go right across the page

banner, css, header, html

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!

Best 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%}