Question

I have a small icon that is next to text, the code looks like this:

<div id="photo-info">
    <p class="textcenter"><img width="16" height="16" 
              src="/Images/Icons/info.png" />Photo Info:</p>
    <p class="textcenter"> Information text here.</p>
</div>

The background of the page is black and the icon white. But when I print the page the text is black with a white background. When printed the white icon does not show, while this is not a huge issue I would like the icon to show when printer. I have another icon that is black that can be printed. How do I switch these when printed?

Note: I could manually insert both images into the page and then use CSS to show and hide the correct icon for screen and print but I am looking for a way that will be automatic and not require me to go back and edit every page that has the code in it.

Answer 1

Another way would be to set the background-image on the image. So your HTML would be like so.

<img class="small-icon" width="16" height="16" />

And then your CSS would look similar to this.

.small-icon {
  background-image: url(path/to/image.png);
}

You can then apply the background image per stylesheet. That way you have a desktop image specified in the desktop stylesheet, and a print image specified in the print stylesheet.