3

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)?

Improve this question
5
  • 1
    may be more appropriate for webmasters.stackexchange.com Commented Jul 22, 2011 at 0:18
  • 1
    Something inside me says to be wary about doing this - I'm not sure exactly why it is. I'd rather play it save and use a wrapper div. Commented Jul 22, 2011 at 0:53
  • 1
    FWIW, you do not need to use multiple elements in order to overlay backgrounds - you can use pseudo-selectors :before and :after. For example, see nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2 Commented Jul 22, 2011 at 3:11
  • @merryprankster I didn't know that. Unfortunately, it won't work for IE6/7, which I still need to support by at least having the theme look reasonably correct. +1 for the great idea, which I will probably use another time. Commented Jul 22, 2011 at 14:11
  • @Sinan I thought webmasters.stackexchange.com was for operating web servers, SEO, etc. Should website programming questions go there, too? I wasn't sure. I guess this technically isn't a "programming" question. Could a mod please migrate my question to webmasters.stackexchange.com, if that is a better fit? Commented Jul 22, 2011 at 15:12

1 Answer 1

Reset to default
3

Use of things like html { height: 100%; } is all but ubiquitous; I see no problem with this usage (and a quick gander at sundry CSS Technical Recommendations suggest it’s sound syntax).

And this goes without saying—esp. since your question is about standards—but make sure you use a DTD (e.g., <!DOCTYPE html>) because a quick Google search sez IE6/7 will only render stylized HTML tags if in so-called standards mode.

Improve this answer
1
  • Thanks for the tips. I updated my question to reflect that we are on the same page. I also clarified by intent somewhat with my second edit. I still cannot figure out if styling the <html> node is a bad idea or just commonly overlooked. Commented Jul 22, 2011 at 14:46

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.