CODEWITHSUNDEEP
htmlcss
monster
monster

Reputation: 1782

background-image appearing in the body margin

I have always thought that the background-image of an element appears in the element itself, its padding and border but not its margin. However, while trying to get something else to work I discovered this seems to not be the case and the background-image is appearing in the margin.

body {
    background: url("https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color:red;
    margin: 50px;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

https://jsfiddle.net/rz52z14r/

As can be seen, the background is appearing in the margin. Additionally, if I add in overflow: hidden the overflow is not actually hidden. Again, I was under the impression the overflow is anything outside the bounds of the element, i.e., element and padding not including the margin.

So, overall: why is the background image appearing in the margin? And why is the overflow not hidden?

EDIT: there have been a few similar answers to the question; all of which provide a solution to the situation. However, the situation is fictional. What I would like to know is why does this behaviour occur on the <body> tag but not any other tag?

Upvotes: 1

Views: 1418

Answers (3)

Hidden Hobbes
Hidden Hobbes

Reputation: 14173

The reason why this occurs is because the root element is treated as a special case when rendering the background. In effect, the background is not being applied to the body but to the canvas:

The background of the root element becomes the background of the canvas and covers the entire canvas, anchored (for 'background-position') at the same point as it would be if it was painted only for the root element itself. The root element does not paint this background again.

The background (http://www.w3.org/TR/CSS2/colors.html#background)

But the root element in this case would be the html element wouldn't it? Well, the following states that it is preferred to apply the background to the body rather than the html element:

For HTML documents, however, we recommend that authors specify the background for the BODY element rather than the HTML element.

The background (http://www.w3.org/TR/CSS2/colors.html#background)

If the background-color and background-image of the html element is transparent and none respectively the rules regarding the canvas apply to the body element instead:

For documents whose root element is an HTML "HTML" element or an XHTML "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first HTML "BODY" element or XHTML "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.

The background (http://www.w3.org/TR/CSS2/colors.html#background)

So, to make a background on the body respect the margins simply add a background-color to the html element in CSS:

html {
    background-color: red;
}
body {
    background: url("https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color:red;
    margin: 50px;
}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>

Upvotes: 3

A1raa
A1raa

Reputation: 625

I'm not quite sure what you are trying to do but the background image you have is sitting in the .body tag. And not the .Body p

https://jsfiddle.net/rz52z14r/12/

Upvotes: 0

Antoine Subit
Antoine Subit

Reputation: 9913

Apply background-image to your container, not to your body.

p {
    background: url("https://www.google.co.uk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png");
    background-size: contain;
    background-repeat: no-repeat;
    border-width: 1px;
    border-style: solid;
    border-color:red;
    margin: 50px;
}

See : https://jsfiddle.net/rz52z14r/9/

Upvotes: 1

Related Questions