0

When i add a background-image to the Body element, the background-image actually appears on the HTML container, not the Body. Same thing applies for background-color too. If i however add some background-color to the HTML container, then the background-image and color of the body don't get inherited by the HTML container.

Here's an example.

<html>

<head>

<style>

* {
    margin:;
    padding:;
}

body {
    border:3px solid green;
    height:200px;
    background-image:url(https://images.immediate.co.uk/production/volatile/sites/30/2020/08/flat-white-3402c4f.jpg?quality=90&resize=500%2C454);
    background-repeat:no-repeat;
    background-size:100px 100px;
    background-color: tan;
    background-position:center bottom;
}

html {
    border:2px solid red;
    height:300px;
}

</style>

</head>


<body>


</body>

</html>

As you can see from this example, i have added a background-image to the body, yet the image gets attached to the HTML container instead.

But, if i now add background-color to the HTML container,

html {
    border:2px solid red;
    height:300px;
    background-color:#f1f1f1;
}

..now you see how the background-image of the Body does doesn't get sort of taken by the HTML, but it remains inside the body.

What is happening here? Why the background-image of the body gets inherited by the html container, but if you add background-color to the html container, it doesn't?

The same thing does not happen if i add a background-image to a div inside a body. The background-image of the div doesn't get inherited by the body.

<body>

<div></div>

</body>

CSS:

div {
    height:500px;
    border:2px solid red;
    background-image: url(https://images.immediate.co.uk/production/volatile/sites/30/2020/08/flat-white-3402c4f.jpg?quality=90&resize=500%2C454);
    background-size:100px 100px;
    background-repeat: no-repeat;
    background-position:center bottom;
}

body {
    background-color: tan;
    height:600px;
    border:2px solid;
}
Temani Afif
  • 245,468
  • 26
  • 309
  • 415

1 Answers1

-1

html {
  background : red ;
}

body {
   background : green ;
}

.yellow {
  background : yellow;
}
<html>
 <body>
   <div class="yellow"></div>
 </body>
</html>

The html and body tags are almost the same with a bit differences between them . You may have to apply styles to both of them like this :

html , body {
  // Your css styles
}

Adding styles to the html will however overwrite every styles u have for other tags .

The example below may help .

Mehdi Faraji
  • 2,574
  • 8
  • 28
  • 76
  • But isn't the body a child of the html container? Also, why does adding background color to the html stops it from inheriting all the properties of the body? –  Oct 13 '20 at 11:10
  • @Uchujin yes ur right but like I've said html and body tags are almost the same and u can apply your styles to both of them . – Mehdi Faraji Oct 13 '20 at 11:13
  • but that doesn't explain why setting a background color to the html tag stops it from inheriting all the properties and elements of the body. –  Oct 13 '20 at 11:15
  • @Uchujin If you add styles to html it will overwrite all other tags styles just because it's the root . – Mehdi Faraji Oct 13 '20 at 11:32
  • I am adding the style to BODY, not html. –  Oct 13 '20 at 11:39