PDA

View Full Version : css background to <html> and <body> tags


jc1cell
12-13-2009, 10:29 PM
Hello to all,

I'm having an issue with the reaction of the browsers to the application of background body styles to the <html> and <body> tags.

When I apply the background to the <html> tag I can't see my background for the <bogy>. When I then created a wrapper div for the content, I can see my <body> tag background inside the wrapper div. Remover the wrapper div and gone is the <body> tag background.

I've seen it done on other sites, just can't get it to work for me. On any of the browsers it doesn't work.

Any ideas or suggestions?

jc

edbr
12-14-2009, 12:24 AM
dont style the hatml use a background for body then if you give a ackground for the wrapper it will show if not then the body background will be seen though it as it were

jc1cell
12-14-2009, 11:47 AM
Hey edbr,

That's usually how I do it. The reason I'm trying this is that I have seen it done before on other sites, and on a lynda.com css training video. I wanted to try it on a site but can't seem to get the body tag background to show if the html tag background is up.

It only shows inside the mainwrapper div, which would then limit the functionality of what I want to do. I'm wondering if it's something that the new browsers can't handle anymore?

jc

Corrosive
12-14-2009, 11:57 AM
I'm not sure that adding a background to the HTML tag is a very good idea. add it to the body tag and then it should be able to be viewed in the page. Also, are you wrapping the whole thing in your wrapper tag? I mean including the body.

I'd expect an HTML structure of...

<html>
<body>
<div id="wrapper">Site content here</div>
</body>
</html>

Cheers

jc1cell
12-14-2009, 02:05 PM
Your code sample is exactly how I work my sites corrosive. I just wanted to try the css styling of html tag for the background property only since it gives some more design options that way.

However, since I haven't been able to solve the issue, I scrapped the layout portion that caused the issue until I get it resolved or simply eliminate it.

Cheers.

jc

gentleone
12-14-2009, 02:44 PM
This article might get you somewhere:

http://www.designified.com/blog/article/48/styling-the-html-body-tags

jc1cell
12-14-2009, 03:14 PM
Nice find gentleone, I have just finished reading it when I saw your post.

Thanks for the time though.

jc

jc1cell
12-16-2009, 03:57 PM
Ok. So i found the solution.

I had to put width:100% on both tags in CSS. Now both backgrounds are working wonderfully. Can't provide a link since I closed the page without saving once I found the solution, but it worked.

jc