0

I am playing with some basic html and css, and I am confused by one thing: According to many resources html element is the root element, but I can change its style values like any other element. According to this https://www.w3schools.com/cssref/css_units.asp % relative length is relative to parent element, but when I set width property of html to 50% it seems that it's not working, because the whole background remains blue, then it works, because children body when set to 100% width takes only 50% of screen, then I realize that it is working and not working at the same time, what am I missing?

html {
    background: blue;
    width: 50%;
    height: 100%;
    overflow: hidden;
}
body {
    background: yellow;
    width: 100%;
    height: 100%;
}
Mesmer
  • 59
  • 4

1 Answers1

1

See the specification:

The background of the root element becomes the background of the canvas and covers the entire canvas

So even though the html element is not the full width of the canvas, the whole canvas takes on that background colour.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • Should mention that it only happens when the background can't be repeated (plain colors) a gradient or an actual image can be fixed with `no-repeat` – Rainbow Oct 14 '19 at 18:15
  • @ZohirSalak — No. With `no-repeat` the background pattern is constrained by the size of the image, not the dimensions of the HTML element. – Quentin Oct 14 '19 at 18:16
  • @Quentin Thanks, background is only an example, you can easily put other elements outside body too, it's not respected at all in my feel, only when it comes to relative width and height – Mesmer Oct 14 '19 at 18:24
  • @Mesmer — It is `overflow: visible` by default. That's the same as almost every other element. Being the root element just means that all other elements descend from it, and it has the special rules for backgrounds I mentioned above. It doesn't constrain the size of the viewport: The browser window does that. – Quentin Oct 14 '19 at 18:26
  • @Quentin I can only find that default styles of is only display: block, where can I find the rest? Does it vary depends on browser? – Mesmer Oct 14 '19 at 18:36
  • @Mesmer – It will vary from browser to browser, although not significantly. The DOM inspector of most browsers will show up so long as you enable the option to use user agent stylesheets. – Quentin Oct 14 '19 at 18:36
  • @Quentin after some testing i found out that with `no-repeat` the background pattern is constrained by the `background-size` , and if we're using a gradient it's constrained by the box's dimensions. Pretty funky considering that gradients are supposed to act like images – Rainbow Oct 14 '19 at 18:55
  • @ZohirSalak gradients act like images but they don't have intrinsic dimension like image so the default value is contain and contain with gradients means a background-size equal to `100% 100%` thus the box dimensions (related: https://stackoverflow.com/a/48503609/8620333) – Temani Afif Oct 14 '19 at 19:24