HTML vs. Body Backgrounds in CSS: Where Should I Apply My Fullscreen Background?

CSS Background on vs : A Tale of Two Viewports

When applying a CSS background to either the or

element, a subtle yet significant difference arises. A background assigned to extends across the entire page, regardless of the body's actual size. Conversely, when applied to both and , the background for remains confined to the element's dimensions.

Reason for the Discrepancy

This behavior stems from the fact that

does not inherently take up the entire viewport height in standards mode. Instead, its background inherits from the element if left unspecified, extending it across the entire canvas.

Superimposing Fullscreen Backgrounds

Now, if you aim to combine two fullscreen backgrounds, whether it be a background color and an image overlay, here are your options:

Combining Backgrounds on a Single Element

Using Background Shorthand:

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

Combining Backgrounds on Multiple Elements

CSS2 Approach:

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

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

CSS3 Approach:

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

Considerations

• In CSS3, only the bottom layer of a multi-layered background can have a background color.
• The noted behavior applies even with multi-layered backgrounds.
• For older browser compatibility, consider using the CSS2 approach.

Remember, this behavior originates from the earlier HTML practice of setting the HTML background attribute on

, causing the background to extend over the viewport.

The above is the detailed content of HTML vs. Body Backgrounds in CSS: Where Should I Apply My Fullscreen Background?. For more information, please follow other related articles on the PHP Chinese website!