调整背景图片的大小

Question

I'am trying to design a website with a background image that should stretch in height and width accordingly when the browser window is resizing. It is complicated to explain what exact behaviour I would like to achieve, for this reason here is the website that does it perfectly:

http://de.wix.com/website-template/view/html/709?originUrl=http%3A%2F%2Fde.wix.com%26number-of-page%3D1%26position-in-page%3D4

I used background-size set to everything possible as well as background-width set to 100%, but I could not achieve such a behaviour.

Answer 1

Have you tried using the below CSS? This fills the page background with the image.

html { 
background: url(images/bg.jpg) no-repeat center center fixed; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

Answer 2

Without any HTML or CSS of your own, it's impossible for us to truly help you, but generally this behavior can be achieved with the following property: background-size: cover

background-image: url('URLGOESHERE');
    height: ???;
    background-size: cover;

As long as you specify an explicit height (pixels) and do not specify a width, this property should cause the background-image to resize while maintaining aspect ratio.

JSFiddle Example.