I am working on a website theme. I want to use a repeating background on the <html>
node so I can have another background overlapping it on the <body>
node. Otherwise, I would add the first background to the <body>
node and then have the second background on a nested <div>
with 100% width/height inside it. I am going for a full-browser repeating pattern that will be visible no matter how the browser is resized. See my examples.
Desired:
<html> <!-- background: url("...") repeat; width: 100%; height: 100%; -->
<body> <!-- background: url("...") repeat-x; width: 100%; height: 100%; -->
Not allowed by specification? Not a good idea because of browser quirks? Work-around:
<html> <!-- width: 100%; height: 100%; -->
<body> <!-- background: url("...") repeat; width: 100%; height: 100%; -->
<div> <!-- background: url("...") repeat-x; width: 100%; height: 100%; -->
It is working in FF5 and IE7/8/9. But is there is a specification that says to not add style to the <html>
node? Is there a particular browser I should watch out for, such as IE6, that will cause me to revert to the alternative if I try this?
EDIT: I am using a proper <!DOCTYPE html...>
declaration (XHTML 1.0 Tansitional). The width/height on the html
node is mostly for clarity of my background pattern's intentions. (Thanks @veryfoolish)
EDIT 2: I know CSS3 supports multiple backgrounds per node and @merryprankster's comment shows me how to simulate that with CSS 2.1 (thanks!), but I really need to know if HTML/CSS according to specification restricts anything "visual" on the <html>
node, which in practice is generally used as an invisible box surrounding the <body>
tag. Is there a reason why no one takes advantage of the <html>
node's guaranteed existence, by applying CSS styles to it (not just cascaded properties, like font-size
)?
:before
and:after
. For example, see nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2