On Feb 24, 2011, at 12:26 AM, Ellen Herzfeld wrote: > I have found that styling the html element changes the appearance of a tiling > background image on the body element. I suppose this is known, but I didn't > know it until now. > > I've put up two test pages here to demonstrate it, one linking to the other: > > <http://ansible.xlii.org/web_design/htmlelement/test1.html>
Yes, and that is expected. Read again what the css 2.1 docs tell - basically it says that the background of the <body> element is propagated to the viewport when (and only when) the root element is transparent and has no background-image attached. The wording in the CSS 2.1 chapter is quite a bit unclear, though. The CSS3 backgrounds and borders module is much easier to understand: http://www.w3.org/TR/css3-background/#special-backgrounds (good test case btw) > It appears that the W3C recommends *not* to style the html element > <http://www.w3.org/TR/2009/CR-CSS2-20090423/colors.html#background>. I never understood why that recommendation is part of the spec… Older UA didn't allow the styling of the root element (<html>), but there aren't many of those around anymore. (some very basic UA's such as those found on some mobile devices still have that limit, but they have so many 'issues' that it is not worth worrying about that.) > However, on a site I'm working on I found it useful, for most of the pages, > to give the html element a background color. Only on one page did I encounter > a problem because I want a background image to fill the viewport on that page > only and it doesn't. > > I would like to have some opinions on the subject. Especially, are there > other problems that I may run into if I persist in my wicked ways? > > Or should I change my method and stop styling the html element? No wicked ways there. I've styled the root element (<html>) for ages without problems (color, background, font, etc). Make sure to set foreground color ('color' property) on the same element, though. If you're really worried about older UAs, style the body for them: body { background: $value url($image); color: $value; } :root { background: $value url($image); color: $value; } /* same as above */ :root > body { background: transparent; color: inherit; } Philippe -- Philippe Wittenbergh http://l-c-n.com/ ______________________________________________________________________ css-discuss [[email protected]] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
