Changing img for Print Stylesheet

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.

score 2 · Accepted Answer · 2012-06-08T02:14:28.510

2

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.

edited Jun 08 '12 at 02:14

answered Jun 08 '12 at 02:07

Thanks, the problem with that is that there are other images on the page and that would still require me to go back and edit the webpages. I may implement this in future pages though, thanks. – L84 Jun 08 '12 at 02:09
Actually, you only have to do this for the images that changed. You can keep all the images that you don't want to change. – Jun 08 '12 at 02:10
But if I change the `img` tag in CSS will that not also change any other `img` tags on the page? – L84 Jun 08 '12 at 02:12
@Lynda I was just using a generalization to make a point. You can apply a class to the image that you want to have a media-specific image. I'll update my answer to demonstrate. – Jun 08 '12 at 02:13
Background images are often (mostly?) not printed, depending on browser settings. – Jukka K. Korpela Jun 08 '12 at 02:33

Changing img for Print Stylesheet

1 Answers1