center kitty? in jsFiddle?

http://jsfiddle.net/TurtleWolf/P7xKm/

All I'm trying to do is center/stretch an image regardless of monitor size so it always fills up the background with the full image. No more or less than the complete开发者_运维问答 horizontal of that image ... Any suggestions?

This will fill the horizontal:

<div id=container>
    <img src="http://placekitten.com/g/200/300" style="width: 100%;"/>
</div>

Fiddle Link: http://jsfiddle.net/YSnDa/

If you also want it to stretch the vertical (wasn't clear if that's what you wanted as well, you can add the height definition too:

height: 100%;

Ideally, you should extract this out to a class to separate your HTML/CSS:

<style>
    .bg_image {
      width: 100%;
    }
</style>

And then apply the class to your image:

<img src="http://placekitten.com/g/200/300" class="bg_image" />    

http://jsfiddle.net/P7xKm/2/

text-align:center

If you want to make the image stretch to fill the background completely, then:

img {
    width:100%;
    height:100%;
}

should do it.

img {
    width:cover;
}

Is what I've started using recently