Search code examples
cssimagebackground

How to show full height background image?

I have a photo type (not landscape) background image with 979px width by 1200px height. I would like to set it to float left and show 100% full image height fixed, without the need to scroll up/down (regardless of content length).

This is my CSS code, but it is not working:

img, media {
    max-width: 100%;
}

body {
    background-color: white;
    background-image: url('../images/bg-image.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}
Solution

  • You can do it with the code you have, you just need to ensure that html and body are set to 100% height.

    Demo: http://jsfiddle.net/kevinPHPkevin/a7eGN/

    html, body {
    height:100%;
} 

body {
    background-color: white;
    background-image: url('http://www.canvaz.com/portrait/charcoal-1.jpg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}