Take the 2-minute tour ×
Programmers Stack Exchange is a question and answer site for professional programmers interested in conceptual questions about software development. It's 100% free, no registration required.

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

share|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
add comment

1 Answer

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.

share|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
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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