I had a
happy accident this week. I accidentally applied a CSS background to HTML (instead of BODY). Guess what? It worked the same as the typical BODY background configuration that everyone uses. So I thought, what would happen if I applied a background to
both HTML and BODY? Check out the results...
The difference between HTML and BODY: When setting both an HTML and BODY background, the HTML applies to the entire browser window, but BODY only applies to the content within the BODY tags.
Uses a horizontal background with an overlaying PNG vertical shadow. Similar to
JeffCroft.com and
SimpleBits.com.
I'm using HTML>BODY on the PNG because IE can't handle Alpha Transparencies. An IE user won't see the vertical drop shadows on the sides of the middle column. I'm using this technique on this site.
Has a vertical centered background with an overlaying horizontal PNG shadow at the top of the page. This is helpful if you need to have a column that appears to have 100% height.
I'm using HTML>BODY on the PNG because IE can't handle Alpha Transparencies.
This was the fun one. For the sake of time (and lack of design skills), I'm using a background image from
FrozenToast.com. This works on all modern browsers, and can be useful if you need a stylish liquid layout with minimal amount of code. I added padding to the BODY, so it'll push the content in and expose the two backgrounds.
If you find any of this useful or notice anything funky with my writeup, leave a comment.