Question

I am using a 10×400 px image as my background image and the css is this:

body {
    background-image:url('bg1.png');
background-repeat:repeat-x;
    text-align: center;
    background-size:100% 100%;
}

In chrome the image is expanding to the full height of the screen in chrome but not in firefox or IE. Help??

Answer 1

Try adding min-height to html.
Demo

html{
    min-height: 100%;
}
body {
    background-image: url('path_to_img.png');
    text-align: center;
    background-size: 100% 100%;
}

Don’t think background-repeat: repeat-x will be needed if background-size: 100% 100% is used.