My background image resizes with the screen height but stretches when I change the width. The content that should appear below it completely covers the image.
This is my current code:
HTML:
<div id="bg">
<img src="http://placehold.it/2560x1000" class="img" alt="" />
</div>
<div id="content">
<!-- some content -->
</div>
CSS:
#bg {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}
.img {
background-position: center center;
background-size: contain;
height: 100%;
width: 100%;
position: relative;
}
View and interact with the code here: http://jsfiddle.net/anm5sqft/