Background-image on body relative to viewport

HTML & CSS
1

I’ve noticed that if you set a background-image on the body, its position will be relative to the viewport rather than the body element, but only if there is not a background of some sort defined for the html element.

With this CSS, the image appears at the top left of the viewport.

body {
  margin:auto;
  background:white url("minitree.png") no-repeat 1em 1em;
  width:800px;
}

With this, it appears correctly 1em from the top left of the body.

html {
  background:white;
}
body {
  margin:auto;
  background:white url("minitree.png") no-repeat 1em 1em;
  width:800px;
}

Is this correct behaviour? IE8, Chrome and FF3.6 do the same thing. If so, what is the logic behind it?

2

I have seen that before and I believe it has to do with section 14.2 of the spec?

I have to run to dinner, so apologies if that isn’t it. I’ll relook it over thoroughly after :slight_smile:

Edit after dinner-This is some part of hte spec. I just will have to find it :). I know I have read somewhere about this before on some other forum

3

With this CSS (no bg color on html), the image appears at the top left of the viewport.

Is this correct behaviour? If so, what is the logic behind it?
When there is no background color set for the html, then any background set on body will actually be rendered as the html background.

Yes it is correct and I think the reasoning for it is because the body does not always extend to the bottom of the viewport unless you set 100% height on it. The html does extend the full height and so it picks up where the body may prematurely end without a defined height thus continuing the BG color on the full canvas.

And yes it is explained in 14.2 of the specs

The background of the root element becomes the background of the canvas and covers the entire [B]canvas[/B], anchored (for [URL=“http://www.w3.org/TR/CSS2/colors.html#propdef-background-position”]‘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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>body/html background</title>

<style type="text/css">

html {background:red}

body {background:yellow;}

#wrapper {
    width:600px;
    height:400px;
    margin:0 auto;
    background:lime;
}

</style>
</head>
<body>

<div id="wrapper">
</div>

</body>
</html>
4

Yes, it’s in that page you link to:

Seems like an odd decision to make. Anyway, thanks for the link, Ryan.

5

I thought so too when I first read about that a long time ago (when I first began web design) and I thought there was just a good reason I’m missing…but there really isn’t. There is a corrolation between the two elements (the body and html element have a relationship together) but to have this sort of behavior happen is baffling me lol :).

I’m sure the W3C had their own reasons for doing it this way.

6

Because of this unintuitive behaviour, I believed the body did always fill the viewport like the html element… til Tommy slapped me with a wet trout in another thread about this.

So I made a fakery page and threw a border around the little bit of body content and lo! the borders acted like any other static box : (

I’m sure the W3C had their own reasons for doing it this way.

Hahahahaha ha ha ha haha haha ha ha ha ha…

You know, it could be just because someone was hungry and they wanted to wrap this up in time for dinner. Or because the tea-leaves forspelled it.

7

Yeah, until a couple of years ago I thought the body was just more or less the same as the html element. It actually is just like a DIV which I think a lot of people don’t realise, as it often negates the need for multiple “wrapper” DIVs that are so prevalent.

Ray, that certainly sounds like logic but like Stomme says, it still seems very unintuitive to me!

8

I believe the original decision was based on the fact that legacy browsers didn’t recognize the html element and therefore you could carry on styling body and have it propagate to html in newer browsers.

There’s a sitepoint blog on some aspects of this (see mine and Tommy’s comments)

I never see a need to add background colors to the html element unless its for some kind of a trick effect. It’s better off left alone :).

The only styles I apply to it are to remove margins and padding as other rules can cause bad effects in lots of not so old browsers (in safari <2 (iirc) adding position:relative to html makes all other positioned elements on the page disappear.).

Of course when served as real xhtml things are different and html and body are treated separately.

9

Well there are some key differences from it and a regular block. Overlfow:hidden; set on it will hide content with or without a height set.
It’s basically like a block though there are some differences.

Older IE do not recognize much styling on the HTML element at all, aka background images on the HTML element, e tc.