Change an image to text via CSS for printing?

Question

Lets say I have a header banner on a webpage I'm about to print. Instead of wasting someone's ink printing the entire block of the image, is there a way via css to replace the image with text of H1 size?

Answer 1

You could put an h1 element and an image in the same place in the source, and have the image CSS display:none for print media, and have the h1 set to display:none for screen media.

Answer 2

I usually just add the following to my style sheet:

.nodisplay
{
    display: none;
}

@media print {
    * {
        background-color: white !important;
        background-image: none !important;
    }
    .noprint
    {
        display: none;
    }
}

And then assign the noprint class to elements which shouldn't be printed:

<div class="noprint">

</div>

And for your example, something like the following should work:

<img src="logo.png" class="noprint" ...>
<h1 class="nodisplay">Text Logo</h1>

Answer 3

Bryan, typically on things like logos I use image replacement for the graphic anyway so the logo itself is really in an H1 tag. Then in my print style sheet. I do something like this...

h1#logo a, h1#home-logo{
    text-indent: 0 !important;
    background-image: none !important;
    font-size: 1.2em !important;
    display: block !important;
    height: 1em !important;
    width: 100% !important;
    text-decoration: none !important;
    color: black !important;
}

Which removes the image replacement and shows the text. Make sure of course that you call this stylesheet separately using media="print".

Answer 4

Adding to Adam's solution: If your text is fixed ("head banner was there" not "ad for such and such was there"), you can use :before or :after pseudo-elements to insert text instead of having the text pre-inserted in the HTML.

I makes your HTML lighter if you are replacing many images with the same text.

I have to say that I dislike this CSS feature, but it is there if you want to use it.