Background image height 100%


I am trying to centre a background image in a div, I put it into another div and centred it from there, but because I want the height to be 100% it doesn't show. I have tried to add float:left; but then the div doesn't centre even if I set the left and right margins to Auto.

How can I make a background image to 100% ?

Problem courtesy of: Richard Harper


I just found this and it seem to work great.

margin:0px auto 0 auto; position:relative;
min-height: 100%; /* min. height for modern browser */
height:auto !important; /* important rule for modern Browser */
height:100%; /* min. height for IE */
overflow: hidden !important; /* FF scroll-bar */
background:url(../images/con-background.gif) 0 0 repeat-y; }
Solution courtesy of: Richard Harper


For modern browsers you could just use:

background-size: cover; 
Discussion courtesy of: Rolchau

This recipe can be found in it's original form on Stack Over Flow.