DIVs and Background Images...

So, basically, they give you this really cool feature in DIVs which lets you put any image in the background so that your page could look exactly how you wanted it...

But then, that would be too eazy right ??

So, here is the catch - THE BACKGROUND IMAGES OF THE DIVs ARE NOT PRINTABLE.

Oh YES !! Exactly the nightmares I used to have....!!!!

Here is this heavenly perfect page I made and woopsie..the header and the footer of the page dont show up in the printouts...because by default, the browsers have the print feature disabled for the background images....

Not a very fun feeling, trust me...

So how to fix the problem ....I am still trying to work out a perfect solution but here are some of my attempts...

• Using the print style sheet -

@media print {

#title { letter-spacing:-1000px; }

#title:before { content: url(banner.jpg); }

}

• Using the DIV layering in the page

<div id="Body" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px; PADDING-TOP: 0px; HEIGHT: 800px" align="center"><p></p><p><img
height="100%" src="images1/background_image.jpg" width="1014"
border="0" /></p><p><div id="LeftNevigation"
align="left">Menu goes here</div><p></p><p><div
id="TopBanner" align="left">Banner goes here</div><p></p><p><div
id="CenterBody" align="left">Main Text Goes Here</div><p></p><p></p></div><p></p><p></p>

• Using the Line-Style Hack

I found another, non-HTML based solution (example) though, and list-style-image is the keyword. I explain.Instead of including our banner graphic via the background-image hook, we use CSS' "lists" functionality instead.Suppose you want the browser to print an image in the place of an h1 with id="title", then the following piece of print CSS does the trick:

#ti\tle {
/* 6. */display: list-item; /*
1. */list-style-image: url(banner.jpg);
/* 2. */list-style-position: inside;
/* 3. */letter-spacing: -1000em;
/* 4. */font-size: 1pt;
/* 5. */color: #fff;
/* 5. */}

Some annotations:
We give our h1 the characteristics of a list-item.
We pretend our banner image is a list-style-image.
Firefox wants you to put the image inside.
We make the text disappear into a black hole by means of Malarkey's Image Replacement (MIR).
As MIR doesn't work in Opera, we set the font-size to 1pt and make the text white. This works fine with Opera's default print settings. Other image replacement techniques rely on moving or hiding mechanisms, all of which would also hide our image. Hence small, white text.
As list-style-image is not supported in IE5 and IE5.5, we exclude these browsers with a simple escaping hack.