Why isn't image 100% and how to I make it adapt to browser?

Question

I'm trying to make an image stretch 100% width of the browser, but I seem to be going wrong somewhere.

Here's a Fiddle.

And I'll add the code at the end.

I've found something similar but I can't understand their code on inspection.

And how are they making the image adapt with the browser?

Are they using Jquery?

Thanks in advance.

Code –

HTML:

<div id="header">
   <img src="http://davesizer.com/blogs/wp-content/uploads/2010/03/eva_jump.jpg" alt="Collin Hughes">
</div>
    <div id="outer" >
        <div id="inner"></div>
</div>
    </body>

CSS:

body, html {
     margin: 0;
     width: 100%;
     }

#header{
     position: relative;
     width: 100%;
     height:auto;
     background-size: 100%;
     margin: 0;
     }

#outer{
     position: relative;
     width: 90%;
     height: 500px;
     background-color: red;
     margin-top:30px;
     margin-right: auto;
     margin-bottom: 30px;
     margin-left: auto;
     padding: 20px 0 0 0;


}

#inner{
     width: 200px;
     height: 250px;
     background-color: lightblue;
     margin: 0 auto;
     top: 20px;
}

Answer 1

You are not setting the width on the image but only on the #header .
You can add the following to fix that:

#header img{
    width: 100%;
}

That also will ensure the width is always 100% even when changing the browser size.
You can try it in the updated fiddle below by re-sizing the result box.

See DEMO

Answer 2

You need to add this to your CSS to target the image. That's how the other site is doing it too.

  #header img { width:100% }