width is less than its background

Question

I've set a style on <html>:

html {
    background: #ECECEC;
    border: 1px solid #FFFFFF;
}

If the contents of the page are wider than the page, why does the border stop, but the background keep going?

Here's a fiddle that show the problem : http://jsfiddle.net/rPGyc/3

Good question! It just seems like `` and `` are special like that, and only for `background-color`. Gradients, for example, don't act the same. — Ry-, Jun 18 '12 at 13:52
here'S a fiddle that show the problem : http://jsfiddle.net/rPGyc/3/ — GregM, Jun 18 '12 at 15:03
I've never seen anyone add style to the `html` element like this, only ever on `body` or better yet, a `div` sitting just inside `body`. I think it will be such a `div` that will give you your desired effect, but I'm not sure this answers your question. — cobaltduck, Jun 18 '12 at 15:16
@minitech: You're right in that these two elements are special like that. Even the spec calls them [*Backgrounds of Special Elements*](http://www.w3.org/TR/css3-background/#special-backgrounds). Gradients, though, *should* act the same because they are background images. In fact, entire background layers should propagate, not just `background-color`. As far as I've seen, the latest stable versions of all modern browsers that support CSS gradients apply them correctly. What browser are you testing in? — BoltClock, Jun 18 '12 at 15:54

score 9 · Accepted Answer · edited May 23 '17 at 11:45

html is a proper block-level element, just like body, p, div, etc — it therefore observes all the same overflow rules as other block elements do.

However, the reason why the background of html bleeds past its border when content overflows its width (or when its width is less than 100% of the browser window, or viewport), is because the background color is propagated to the viewport, which is the canvas containing html and all its contents that are rendered. The border remains part of the html element, however, so the element doesn't expand when the content overflows. This behavior is very similar to how applying a background to body, but not html, causes the body background to propagate to the root element anyway, as described in this answer which cites this section of the spec.

As Alohci notes in a comment under the answer, the same applies to html with respect to the viewport:

Note that html behaves with respect to the viewport in much the same way as body behaves with respect to html, with the background escaping beyond the confines of the html element. See http://jsfiddle.net/GmAL4/4/ to see what I mean.

score 2 · Answer 2 · answered Jun 18 '12 at 15:15

Here's a little fix using jquery

 $("html").width($(document).width());
 $("html").css("border", "1px solid black");

I know it's lame that css alone don't seem to work fine but at least we can have the wanted result with jquery.

here'S the fiddle : http://jsfiddle.net/rPGyc/5/

score 0 · Answer 3 · answered Jun 18 '12 at 15:25

0

A way to prevent that is using the css3 word-wrap property. Jsfiddle here

Simply add:

html{
background-color: lightgrey;
border: 1px solid #fff;
padding:0px;
margin:0px;
width:100%;
height:100%;
/*The important bit*/
word-wrap: break-word;
}

answered Jun 18 '12 at 15:25

Rorok_89

365
1
9

width is less than its background

3 Answers3

Linked