Here’s a trick you can use when you want the printed version of a webpage to include the background images you have in your CSS.
First of all you’ll want to have a specific print css file that targets the print media type. You can easily create one and include it within the head.
Then you will override the container which hosts your background image in the print style file and change the display style of the element to list-item and attach the background image here again as a list-style-image. To make sure you don’t need to deal with margin or padding issues, you’ll also place the image inside your mock list.
I’ve tested and verified this method in the latest versions of Safari, Chrome, Internet Explorer, and FireFox. Please let me know if you find any inconsistencies during your testing.
Here’s the sample code:
Your main document, will import 2 stylesheets, 1 for the screen and another for the printer. You can fine tune the media settings as you need.
<!doctype html>
<html>
<head>
<link
rel="stylesheet"
type="text/css"
href="screen.css"
media="screen, print"
/>
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
</head>
<body>
<div class="bg print"></div>
</body>
</html>
Here is the background image called in your main css file used in browsers.
.bg {
background: url("https://fpoimg.com/250x250") top left no-repeat;
width: 250px;
height: 250px;
}
And your print hack used by browsers when users initiate the print dialog. So you can add the print class to your div and have it print out, or remove it if needed.
.bg.print {
display: list-item;
list-style-image: url("https://fpoimg.com/250x250");
list-style-position: inside;
}
Note: You can also use the @media rule instead of importing files if you want to avoid making an extra http request.