I have seen lots of examples where some HTML text is replaced with a
background image using CSS. For example, replacing the text of an <h1> with
a graphical logo, like so:
CSS:
h1 span { display: none; }
h1 { height: 100px; background: url("mycompany.gif") no-repeat 35px 40px; }
HTML:
<h1><span>My Company</span></h1>
This allows the text version to be displayed for non-CSS browsers, and
allows a more visually appealing logo to be displayed for CSS enabled
browsers (assuming they don't have images turned off). One side effect of
this is that when the user prints, the default settings (at least with IE
6... I assume other browsers are probably similar) do not print background
images. So instead of seeing the graphical logo or the text, there is just
empty space.
Is there a good way around this? At the very least, I can get the text
version to print by adding the following CSS:
@media print
{
h1 span { display: inline; }
}
However, if the user configures his/her browser to print background images,
then BOTH the background image and the text are printed. Is there a
solution, or am I better off just putting the image in the <h1> (using the
<img> element instead of using CSS to add it as a background)?
Thanks,
Peter Foti
