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
  • 1
    may be more appropriate for webmasters.stackexchange.com – Sinan Jul 22 '11 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. – sevenseacat Jul 22 '11 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 – merryprankster Jul 22 '11 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. – jimp Jul 22 '11 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? – jimp Jul 22 '11 at 15:12
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
  • 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. – jimp Jul 22 '11 at 14:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.