'How can I clip the background of the <body> element to its content box?

I have this style rule:

body {
  font-family: Georgia, serif;
  font-size: 100%;
  line-height: 175%;
  margin: 0 15% 0;
  background-color: #d2dc9d;
  background-clip: content-box;
}

When I tested a page that made use of it, the background-clip property seemingly had no effect i.e. the background colour extended beyond the content box, over the margin and to the edge of the screen.

I went looking for an explanation in the specification:

https://www.w3.org/TR/css-backgrounds-3/#the-background-clip

Note that the root element has a different background painting area, and thus the background-clip property has no effect when specified on it.

I also came across another related SO thread:

Why does styling the background of the body element affect the entire screen?

In CSS values are never propagated upward; that is, an element never passes values up to its ancestors. There is an exception to the upward propagation rule in HTML: background styles applied to the body element can be passed to the html element, which is the document's root element and therefore defines its canvas.

So is the case that the background colour I apply is being passed to from the <body> element to the root <html> element? And thus even though I can clip the background to the content box of<body>, the background colour passed to <html> will obscure the effect because it fills the canvas?

Whatever the reason, is there a way for me to visibly clip to the content box of <body>? Is my only option to insert a <div> between <body> and the body content and style that, if such a method would even work?

cssbackgrounddocument-body


Solution 1:[1]

As Temani said earlier, adding background color to html is going to cancel out taking from body. If anyone wants more information about this topic, Kevin Powell has a nice, concise tutorial about that here: https://youtu.be/QUemJlZe7bo. Posting this just in case other people are struggling with it too and wonder why/how that works.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 pawmarc

Related Questions