background image compressed horizontally

Question

based on a recommendation ("css only technique number 1" here http://css-tricks.com/perfect-full-page-background-image/ ), i used an inline img element and css to make a background image that would fill the whole browser window.

it all works fine except that under a certain width of window, when the image resizes it starts compressing the image horizontally, in other words, not maintaining the aspect ratio of the image.

for instance, this jfiddle...if you move the browser around you can see honey boo boo's aspect ratio is not preserved.

http://jsfiddle.net/4040newb/h7QMv/2/

  <div class="container-fluid">
    <a href="gallery.html">
    <img  src="http://thenypost.files.wordpress.com/2013/09/tv-honey_boo_boo.jpg" class="bg "/>
    </a>
  </div><!-- .container -->

Answer 1

Instead of using img element, you can just apply the background image to the div (or any other container stretched accordingly to the browser borders).

Then, you do the following for the background:

.picture {
    background-image: url(...);

    background-size:cover; /* this way */
    background-size:content; /* or this one (which you prefer) */
}

... to stretch the image accordingly to its container size.

EDIT:

Also, in this very case:

html, body
{
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.container-fluid
{
    min-width:100%;
    min-height:100%;
    background-position:center;
}

(But this is an example -- you should play with your layouts by your own then).

Answer 2

I would highly recommend using the CSS3 method described first in the post - It's a simpler and more reliable method:

html { 
 background: url(images/bg.jpg) no-repeat center center fixed; 
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
}