A–C
D–H
I–Z
Developer services
Project centers
Community resources
- Adobe Cookbooks (share code)
- CSS Advisor (browser bug fixes)
- Exchanges (share components)
- Adobe Labs
- Adobe Open Source
- Forums
- RSS feeds
- Bug base
- User groups
- Adobe Community Experts (ACE)
- Developer events
Integration
Product documentation
Downloads
Samples
Training and books
- Online training
- Classroom training
- Certification
- Adobe Developer Library
- Adobe Press
- Safari Books Online
Newsletters
Blogs
Archives
ADC program
Additional resources
CSS Advisor
Applying backgrounds to your html tag
Problem
Are you looking for a clean way to apply a background image over the whole page, AND as a full width header (or center strip, etc)?
Solution
I recently discovered that you can apply a background to both your body tag AND your html tag.
Detailed description
I stumbled onto this recently and it frees up my layouts considerably. All i do is apply a background image to BOTH your body tag (eg- a strip across the top of the page) AND a second background to your html tag (eg- a tiled background image).
This allows you to create a more complex layout with far less extra divs.
I dont think this idea has been used before (according to a Google search) and as far as i can tell it works fine in IE 5, 6 and 7, FF1 and 2, and Safari.
Anyone else done this before?
Text ID: APPLYING_BACKGROUNDS_TO_YOUR_HTML_TAG
Comments (15)
To add a comment, please Log in.
Thanks
by Sarbjit Grewal78 on December 10, 2008
Thanks guys you are very useful.
Would like you to explain
by kquig on September 5, 2008
HI, Would be better if you would explain step by step what it was you did.
Possible solution
by tomthewebguy on May 26, 2007
interstella,
Have you tried putting !important next to the value for the body style? It might fix your problem, but no guarantees.
doesn't seem to work in Firefox Mac
by interstella on February 24, 2007
I added a left "edge" using the body tag, and a right "edge" using the html tag, and when the html style is applied, the body style disappears. not the other way around. the html style is declared first. thoughts?
Here is an example
by vidman1969 on February 1, 2007
Sorry it took me a while to get back with an example- been kinda busy.
Here is an example of a site I'm working on that i discovered this idea with-
http://www.yrt.com.au/dev_site/basic_page1.html
The page background is styled via the html tag while the blue stripe down the page is styled via the body tag.
Oh and yes... I know it has some naughty tables but the complex layout of the whole footer section made is mandatory.
Yes, all the time
by Brian Crescimanno on January 23, 2007
Yes; in fact, it is the correct way to apply the background to the entirety of the document since body can be given margins, etc and (if the specs are followed correctly) the background would not render in the "margin" area outside the body.
Remember, your html and body tags are containers--they have some "special properties" but they are containers like any other container tag.
vidman, please direct us to example(s)
by Barry LaVette on January 20, 2007
I understand the strip to the body tag but what is the hook in the html for the
CSS to place the second image? <body>, #wrapper, <h1>, etc.
Dazzling Beauty / CSS Zen Garden
by vince_p on January 19, 2007
This has been done here by Deny Sri Supriyono :
http://www.csszengarden.com/?cssfile=/195/195.css&page=0
Suggestion for screen readers / accessibility
by branjo on January 18, 2007
Your dual backgrounds is a great idea. I might suggest adding a hidden class to the text that is in the tagline and logo graphics, so that screen readers can read the tagline and company name - essentially forcing an alt tag to the images that you've placed with css.
apply:
.hidden {display: none;}
to:
<div id="tagline"><h2 class="hidden">Diagnostic Imaging Services</h2></div> <!-- End Tagline -->
<div id="logo"><h1 class="hidden">Lakeland Radiologists, Ltd.</h2></div> <!-- End Logo Div -->
Broken?
by OkayJay on January 17, 2007
Works in Firefox on a Mac. Isn't the grey area SUPPOSED to move when you resize the window, so it stays centered?
Works for me!
by KirbyK on January 17, 2007
I looked at the page in IE7 and XP Pro and it worked perfectly for me.
Example broken in IE7 / XP pro
by WollombiWombat on January 17, 2007
The example suggested by sbstash is broken in IE7/XP pro. The central grey background that extends down the page moves as the browser window width is changed. Anyone else notice this or have a solution ?
Sample of Background on BODY and HTML tag
by sbstash on January 17, 2007
For a live example, you can visit www.lakelandradiology.com. This site has a background image on both tags.
Do you have a sample of what you mean?
by chris_t on January 17, 2007
It would be nice to see a sample or description of exactly what you mean. thanks.
Good idea
by LeoCreo on January 17, 2007
I never try it, but it's look interesting, good idea. I will try it soon.