How to make the background image to fit into the whole page without repeating using plain css?

Question

I have an JPG image with size 1024 x 724. My page size is not fixed. My requirement is: If I resize the page then the background image should also resize and fit to the page.

Answer 1

You can't resize background images with CSS2.

What you can do is have a container that resizes:

<div style='position:absolute;z-index:0;left:0;top:0;width:100%;height:100%'>
  <img src='whatever.jpg' style='width:100%;height:100%' alt='[]' />
</div>

This way, the div will sit behind the page and take up the whole space, while resizing as needed. The img inside will automatically resize to fit the div.

Answer 2

You can either use JavaScript or CSS3.

JavaScript solution: Use an absolute positioned <img> tag and resize it on the page load and whenever the page resizes. Be careful of possible bugs when trying to get the page/window size.

CSS3 solution: Use the CSS3 background-size property. You might use either 100% 100% or contain or cover, depending on how you want the image to resize. Of course, this only works on modern browsers.

Answer 3

Depending on what kind of image you have, it might be better to rework the design so that the main image fades to a set solid color or repeatable pattern. If you center the image in the page and have the solid color as the backgroud.

See http://www.webdesignerwall.com/trends/80-large-background-websites/ for examples of sites using large or scalable backgrounds.

Answer 4

background:url(bgimage.jpg) no-repeat; background-size: cover;

This did the trick

Answer 5

try something like

background: url(bgimage.jpg) no-repeat;
background-size: 100%;

Answer 6

These three line all together worked for me.

background-image: url("pages/images/backImage.png");
background-size: 100%;
background-repeat: no-repeat;