sweet Rush Trucking website. Yeah. We did that.
So your web page has a background image that fades to black (or some other solid color). You want to make sure that when the page expands vertically beyond the height of the background image, the black background will also expand vertically without limit.
No one will notice that the background image is shorter than the page because it fades oh-so-smoothly into that solid color. You’re a genius web designer!
The best way to make sure that the background color shows up behind the image is to assign the background color to the body tag using CSS. Or you could assign the color to the html tag. You’re done. End of article.
Here’s the catch. Sometimes you have elements, such as iFrames on your page. iFrames have a nasty habit of inheriting color from html tag. Or, if you have a color set for the body tag, likewise, the body tag within the iFrame will also get that same color. So, here’s a solution…
Almost-Solutions
Don’t use iFrames. Great. We’re done here, except… some content management systems automatically employ iFrames. For example, the DotNetNuke Text/HTML modules use an iFrame in the edit screen. If you set the background color of the body tag for DotNetNuke pages, be prepared for this color to show up in the text editor box (when you may rather have a clean white background).
Write inline HTML or style code to tell the iFrame what background color it should have. This is all well and good if you have access to do this. Also, assigning a background color directly in iFrame HTML is very typical. However, if you are using a content management system, such as DotNetNuke, and you don’t feel like trying to find out how/where it is automatically generating those iFrames (code surgery), you might as well look for a code band-aid instead.
If you are using DotNetNuke, use a different skin (with a white or transparent body background color), for edit screens. Yes, you could do that. But then you would have to maintain another skin. And maybe you wanted edit screens to have the same styles as non-edit screens.
Why not target the iFramed content and normal page content differently in CSS? So far, I’ve tried this and have not had any luck. It seems that the CSS will let you target most nested elements differently, but HTML and body tags are treated the same by CSS whether they are nested inside an iFrame or not.
Why not assign the background color to a div tag and use CSS to give it a height of 100%? Again, CSS doesn’t compute. A div tag with a style height of 100% is as tall as its content. That means the div tag with the background color will not always expand to 100% of the window height, thus revealing a naked colorless area that destroys the illusion that your background image smoothly fades into never-ending blackness.
JQuery Solution
If only you could just know how tall (in pixels) a div tag needed to be in order to cover the entire window height at all times
Let’s abruptly end this technical article: JQuery to the rescue!
Let’s say you have the following HTML:
HTML example
<div id = "BackgroundColorDiv"> <!--HTML content--> < /div>
Your goal is to make the #BackgroundColorDiv div expand fully so that its background color does not fall short of covering the whole window.
You could use the following JQuery:
Add this JQuery script to your page (don’t forget to remove line numbers first)
Add this JQuery script to your page (don’t forget to remove line numbers first)
<script type="text/javascript"> var elemToSizeId = "#BackgroundColorDiv"; //element with the background color. $(document).ready(function() { resizeElementByID(elemToSizeId); }); $(window).resize(function() { resizeElementByID(elemToSizeId); }); function resizeElementByID(elemId) { var windowHeight = $(window).height(); var currentHeight = $(elemId).height(); if (currentHeight < windowHeight) { var docHeight = $(document).height(); var bodyHeight = $("body").height(); var resizeHeight = 10500; if (docHeight > windowHeight) { resizeHeight = docHeight; } else if (windowHeight > bodyHeight) { resizeHeight = windowHeight; } else { resizeHeight = bodyHeight; } $(elemId).height(resizeHeight); } } </script>
And that’s it. Good luck.
