How Do HTML and Body Element Backgrounds Interact in CSS, and How Can I Achieve Fullscreen Backgrounds?

Applying Backgrounds to the Page

When working with HTML and CSS, applying backgrounds to the page can lead to unexpected results. By default, backgrounds applied to the body element will extend to cover the entire page, regardless of the actual size of the body content. However, this behavior changes when a background is also applied to the HTML element.

Expected Behavior

In standards mode, both the HTML and body elements do not initially take up the entire viewport height. If no background is applied to the HTML element, it will inherit the background from the body. However, once a background is applied to the HTML element, this mechanism is broken, and the backgrounds for both elements will respect their defined areas.

Combining Backgrounds

To superimpose two fullscreen backgrounds (e.g., a background color and a semi-transparent image), you can use either the body or HTML element as a single container.

Single Element Approach:

Use the background shorthand property to combine background-color and background-image within one element:

body {
    background: #ddd url(background.png) center top no-repeat;
}

Multiple Element Approach (CSS2):

1. Set a background image to the HTML element.
2. Set a transparent background image to the body element with the desired height and min-height to cover the viewport.

html {
    height: 100%;
    background: #ddd url(background1.png) repeat;
}

body {
    min-height: 100%;
    background: transparent url(background2.png) center top no-repeat;
}

Multiple Element Approach (CSS3):

Declare multiple background values as a single property within one element:

body {
    background: url(background2.png) center top no-repeat, #ddd url(background1.png) repeat;
}

Browser Support

The background propagation mechanism applies to both single and multiple element approaches. However, for older browser compatibility, it's recommended to use the CSS2 method, which is supported back to IE7.

The above is the detailed content of How Do HTML and Body Element Backgrounds Interact in CSS, and How Can I Achieve Fullscreen Backgrounds?. For more information, please follow other related articles on the PHP Chinese website!