Confusion about the background color of body and html element

Question

I set the background color of both body and html element background-color: rgb(35, 39, 47, 0.78);, but I got two color in the webpage when I previewing. How come? What happened? This is the source code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>RGBA</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      body {
        height: 500px;
      }
      html,
      body {
        background-color: rgb(35, 39, 47, 0.78);
      }
    </style>
  </head>
  <body></body>
</html>

The picture when I preview:

I try to just only set the background color of body element, I get one color. In my point, the two color are overlayed form a new color, which is the actual background color of the body element, isn't It?

You've set a colour with some transparency. Where you have one layer you'll get a colour. Where you have two layers the partial transparency on the upper layer will give you a darker colour — Tangentially Perpendicular, Aug 07 '23 at 04:49
Could I get some reference for this knowledge? Thank you a lot. — Ricky W. Chew, Aug 07 '23 at 04:51
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/rgb — Tangentially Perpendicular, Aug 07 '23 at 04:54
A reference which discuses the formula for working out what the opacity of the combined color should be is at: https://stackoverflow.com/questions/7438263/alpha-compositing-algorithm-blend-modes — A Haworth, Aug 07 '23 at 06:42

Quentin · Accepted Answer · 2023-08-07T19:21:35.060

I set the background color of both body and html element background-color: rgb(35, 39, 47, 0.78);, but I got two color in the webpage when I previewing. How come? What happened?

Since you can (partially) see through the BODY, its background colour blends with the background colour of the HTML. (Consider if you have two sheets of translucent red plastic and you half overlay one with the other, where they overlay they are darker).

So at the bottom you see rgb(35, 39, 47, 0.78); (the HTML colour) and at the top you see rgb(35, 39, 47, 0.78); blended with rgb(35, 39, 47, 0.78); (the BODY colour).

.red { background: rgba(255, 0, 0, 0.5); }
.yellow { background: rgba(255, 255, 0, 0.5); }

.red, .yellow {
    height: 150px;
    width: 150px;
    border: solid orange 1px;
    position: absolute;
}

.red { top: 10px; left: 10px; z-index: 2;}
.red + .red { left: 85px; z-index: 3 }
.yellow { top: 85px; left: 45px; z-index: 1; }

<div class="red"></div>
<div class="red"></div>
<div class="yellow"></div>

I try to just only set the background color of body element, I get one color.

For historical reasons (connected with the pre-CSS way of setting the background colour for the document with the bgcolor attribute on the BODY element), the CSS spec requires that when the following conditions are met:

You are styling an HTML document
You apply a background colour to the BODY element
You don't apply a background colour to the HTML element

… then the background colour of the BODY element is moved to the HTML element.

I don’t understand why rgb(35, 39, 47, 0.78) would be a syntax error. It seems something like that is in the spec. Am I misreading it? — A Haworth, Aug 07 '23 at 09:39
@AHaworth - RGB values take 3 numbers, not 4 like RGBA … at least that used to be the case. A glance at MDN suggests they may have changed that. I’ll revisit this answer and correct that when I’m back on a real computer. — Quentin, Aug 07 '23 at 10:50
Yes, it has changed and they seem to have also allowed one to keep the commas for ‘legacy’ reasons, also to keep rgba, though rgb, commaless, with 3 or 4 parameters appears to be the ‘proper’ way now. — A Haworth, Aug 07 '23 at 11:34

score 0 · Answer 2 · answered Aug 07 '23 at 06:30

This is because the fourth parameter of the background-color:rgb() property is used to set the transparency of the element! Since the level of the body element is higher than that of the html element, setting the fourth parameter of the background-color:rgb() property of the body element to less than 1 will cause some of the color of the html element to pass through the body element, causing you to see a darker color

I hope my answer can help you

A Haworth · Answer 3 · 2023-08-07T11:36:43.027

This bit is inaccurate - to be rewritten when time allows. See comments below: The height of the element with tag HTML is defined to be the viewport height.

On a screen this is normally the height of the screen minus any bits being used for other things.

So giving the HTML element that background covers the viewport in a partially transparent dark grayish color.

I think this is the end of the inaccurate bit.

Then the body element is given a height of 500px so another layer of that partially transparent color is painted but only for 500px.

Where the two partially transparent colors overlap the system works out what the new color should be. The basic rgb colors are the same in this case. The alpha channel (the 0.78 in your example) gets a new value which is calculated from the two overlaid alpha channels:

top-alpha-channel + bottom-alpha-channel * (1 - top-alpha-channel)

see e.g. Alpha Compositing Algorithm (Blend Modes)

Putting in your 0.78 value in both cases the new alpha channel (=opacity) value is 0.9516.

So, it's darker - a bit less see-through - but it's not completely opaque.

If you just want the viewport (the bit the user sees at any time) to have the original color then just set it for the html element.

OR just set it for the body. The whole of the viewport will pick up that background color but (for reasons I hope someone can explain - UPDATE: the accepted answer here explains it: Why does styling the background of the body element affect the entire screen?) the blending of the body and viewport colors does not take place so you see the color you want over the whole viewport.

Whether you want to set your body to a fixed 500px will depend on your particular context of course.

*The height of the element with tag HTML is defined to be the viewport height.* --> the html element is as tall as its content so it will have the same height as the body element (plus its default margin) — Temani Afif, Aug 07 '23 at 09:03
@TemaniAfif Thanks for the clarification. I must have misread somewhere. — A Haworth, Aug 07 '23 at 09:37

score -1 · Answer 4 · answered Aug 07 '23 at 06:09

This happened because you have given a height of 500px in body. Because you are giving color to both HTML and Body, they are overlapping till the height of 500px and that's why the color in upper 500px is darker than the lower one. Either you can remove below given code from your CSS :

body{
    height: 500px;
}

or you can just remove HTML from :

html,body{
    background-color: rgb(35, 39, 47, 0.78);
}

This will solve your issue. Thank you

score -3 · Answer 5 · answered Aug 07 '23 at 04:52

-3

because you set a height: 500px; on the body

answered Aug 07 '23 at 04:52

Jamel Racman Jr

51
2

Will the background colors of child elements and parent elements be superimposed into a new color? – Ricky W. Chew Aug 07 '23 at 04:58
the color you put have opacity (red, green, blue, // opacity or alpha) 0.78 – Jamel Racman Jr Aug 07 '23 at 05:10
Can I get some references for this knowledge? I can't find it. Thanks. – Ricky W. Chew Aug 07 '23 at 05:19
[link here](https://www.w3schools.com/css/css3_colors.asp#:~:text=RGBA%20color%20values%20are%20an,and%201.0%20(fully%20opaque)) try to adj and practice it so you will be familiar on it – Jamel Racman Jr Aug 07 '23 at 05:22
https://prnt.sc/ESTvzdB7fvem (this type you want to) replace css this type – Sunny Parsana Aug 07 '23 at 05:24

score -3 · Answer 6 · answered Aug 07 '23 at 06:30

I noticed that the problem lies in setting a CSS property background-color with an RGBA value that contains an alpha channel, i.e., rgb(35, 39, 47, 0.78). However, the issue here is that the background-color property in HTML and CSS does not support color values with an alpha channel.

Confusion about the background color of body and html element

6 Answers6