How to make a background header image extend to full width of browser
<p>Still learning how CSS works. At the moment I'm trying to make a background image cover the entire header without any gaps on the top/right/left sides. <br><br> I have tried several other options and I can't seem to get this image to move.<br><br>(i.e adding  in html but I want to keep that separate from that file. I have also tried making the margins 0)<br> <br> </p>

<pre><code>&lt;!--EXAMPLE1--&gt;
.splash_img {
background-repeat:no-repeat;
background-position: center top;
display:block;
margin:0px auto; 
}

&lt;!--EXAMPLE2--&gt;
.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px; 
} 
</code></pre>

<p>It continues to stays on the top right corner of the browser. Currently this is what I have.<br></p>

<pre><code>&lt;head&gt; 
    &lt;div class="splash_img"&gt;
        &lt;img src="Images/bakemock.jpg" alt="bake"/&gt;
    &lt;/div&gt;
&lt;/head&gt;

.splash_img:{   
background-image:url("Images/bakemock.jpg") no-repeat center;
background-size:100% 100%; 
height:630px;
}
</code></pre>