I am having trouble setting the background of my code to display a picture that is 300px in height and 100% in width. However, when I set the width to 100%, there are about 15px gaps on each side. I could adjust the width to 1000px, but that presents issues as it may not look good on different monitor sizes. I've previously asked a similar question, but the solution provided doesn't work for this specific issue.
JSfiddle
HTML:
<div id='header'>
<img src='http://i.imgur.com/tvTMm.jpg' id='headerbg'>
</div>
CSS:
#headerbg {
background-image:url('http://i.imgur.com/tvTMm.jpg');
height:300px;
width:100%;
background-repeat:none;
background-size:1340px;
-webkit-filter: blur(2px);
-moz-filter: blur(2px);
-o-filter: blur(2px);
-ms-filter: blur(2px);
filter: blur(2px);
}