[SOLVED] Changing img for Print Stylesheet

Changing img for Print Stylesheet

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.

Solution

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.