Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change an image to text via CSS for printing?

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?

like image 573
Bryan Denny Avatar asked Dec 30 '08 22:12

Bryan Denny


1 Answers

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>
like image 105
Gordon Bell Avatar answered Oct 01 '22 10:10

Gordon Bell