How to get a background image to print using css?

Question

I am using the ASP Net Sprites package to create CSS Sprites on my website.

It is working, but the images it generates do not appear when printed.

The code generated at HTML level is:

<a href="/" id="siteLogo"><img class="getmecooking-logo-png" src="data:image/gif;base64,R0lGODlhAQABAIABAP///wAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /></a>

How can I get the logo image to appear when a user prints the page?

I have tried adding this in my print.css stylesheet, but it didn't work:

#siteLogo
{
    visibility: visible;
}

The print.css is working fine and it is formatting the page as I want it to for other elements on the page. My only issue is that I can't get the site logo image to display when it is printed.

You can't. It's a browser setting and as stated below you can't rely on it, so you should use img tags. Anyway it's good practice to use image tags for images (photos, logos, etc) and css background-image for backgrounds (repeating patterns, etc...). — Pedro Correia, May 10 '11 at 12:49
The reason I want to do it this way to to automate the generation and usage of CSS Sprites. I might just have to use a stand-alone image for the logo. — Techboy, May 10 '11 at 12:53
@Johann below has posted a working solution, you should really accept that one. — Talon, Feb 18 '14 at 13:44
@Talon No, because he says 'For Chrome and Safari you can add the following in your CSS ... For other web browsers unfortunately it's up to the user to manually select the option to print background images' — Techboy, Feb 18 '14 at 16:50

Johann · Answer 1 · 2014-02-18T13:58:09.773

111

For Chrome and Safari you can add the following in your CSS:

@media print
{
    * {-webkit-print-color-adjust:exact;}
}

For other web browsers unfortunately it's up to the user to manually select the option to print background images (e.g. for users with IE 9, 10 and 11 they have to click on the cog icon -> Print -> Page Setup, and activate the option)

edited Feb 18 '14 at 13:58

answered May 01 '13 at 16:54

Johann

12,158
11
62
89

13

I can't believe this hasn't been marked as the solution – Talon Feb 18 '14 at 13:43
5

@ScottWe For starters, it's nonstandard -- there's no equivalent for IE or Firefox. – Blazemonger Feb 09 '15 at 20:35
chrome is now blink not webkit – geedubb Feb 01 '16 at 14:54
2

This should be marked as the solution. (FYI Bootstrap 3 folks, this isn't enough because BS3 makes the opinionated decision to set backgrounds transparent with !important. This is fixed in BS 4) – genkilabs Oct 05 '16 at 21:51
thank you dude this is what i am exactly looking for – BIBIN JOHN May 30 '19 at 02:07
Downvoted, cause doesn't work with my Salesforce Lightning cmp – kabrice Jun 24 '19 at 09:58
It doesn't work for me on Chrome and Safari. – Derzu Jan 07 '22 at 13:52

score 42 · Answer 2 · answered Nov 07 '12 at 11:42

42

You could have an own media-query for print and use :before selector with the attribute "content".

Put this in the media query and it will insert the image when you try to print:

p:before { content: url(images/quote.gif); }

http://www.htmldog.com/reference/cssproperties/content/

answered Nov 07 '12 at 11:42

Charlie

421
4
2

2

it worked, but, how could I make the image to repeat? – sites Jul 31 '14 at 04:28

score 27 · Accepted Answer · edited Sep 09 '16 at 20:03

27

It's up to the user and their browser settings to print or not print background images. To keep yourself from relying on that, put the images directly in the HTML with an actual <img /> tag.

edited Sep 09 '16 at 20:03

Ian Hazzard

7,661
7
34
60

answered May 10 '11 at 12:25

Kon

27,113
11
60
86

score 10 · Answer 4 · edited Sep 19 '17 at 14:43

It is working in Google Chrome when you add the !important attribute to the background image. Make sure you add the attribute first and then try again, you can do it like this:

.class-name {
background: url('your-image.png') !important;
}

Also you can use these useful printing rules and put them at the end of css file:

@media print {
* {
    -webkit-print-color-adjust: exact !important; /*Chrome, Safari */
    color-adjust: exact !important;  /*Firefox*/
  }
}

Dexter · Answer 5 · 2013-07-05T08:40:02.447

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("http://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("http://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.

reference from: http://www.seifi.org/css/how-to-force-css-background-images-to-print-in-web-browsers.html

Lone link is considered a poor answer (see [faq#deletion]) since it is meaningless by itself and **target resource is not guaranteed to be alive in the future**. [It would be preferable](http://meta.stackexchange.com/q/8259) to include the essential parts of the answer here, and provide the link for reference. — j0k, Jul 03 '13 at 07:48

score 1 · Answer 6 · answered Nov 28 '15 at 16:24

1

Try this:

@media print {
    body:before {
        content:url(http://192.168.0.11:8088/automation/img/mahyaA5.jpg);
        position: absolute;
        z-index: -1;
      }
}

answered Nov 28 '15 at 16:24

ashkufaraz

5,179
6
51
82

score 0 · Answer 7 · edited Oct 05 '14 at 11:42

0

<div style="position: relative;">
    <img src="/images/blue.png" style="width: 100px; height: 100px;">
    <div style="position: absolute; top: 0px; left: 0px;">
        Hello, world.
    </div>
</div>

This make sense of the CSS you posted, also see this website: https://defuse.ca/force-print-background.htm

edited Oct 05 '14 at 11:42

Ingmar Boddington

3,440
19
38

answered Oct 05 '14 at 10:42

Nasim Bahar

115
3
13

score 0 · Answer 8 · edited Jul 04 '11 at 12:14

0

If you use Internet Explorer, this is how you do it:

Go to the 'Tools' menu.
Click on 'Internet Options'.
Click on the 'Advanced' tab.
Put a check on print background color and images.

edited Jul 04 '11 at 12:14

Cody Gray - on strike

239,200
50
490
574

answered Jul 04 '11 at 11:49

kriti

17
1

I cant find the checkbox. – aloisdg Nov 18 '16 at 18:39

score -1 · Answer 9 · answered May 10 '11 at 12:21

-1

set media="print"

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

Reference

answered May 10 '11 at 12:21

xkeshav

53,360
44
177
245

1

Sorry I should have explained. The print.css is working fine and it is formatting the page as I want it to for other elements on the page. My only issue is that I can't get the site logo image to display when it is printed. – Techboy May 10 '11 at 12:26
3

why downvoted?? OP does not clear question ..see the comments – xkeshav May 10 '11 at 12:29

score -3 · Answer 10 · answered Jul 03 '17 at 13:27

When you are trying custom printing through creating print format directly with java script and if there is tag is there then it won’t be print because browser intensely send request to printer without waiting to load image in cache. So good practice add image which you want to print on html page and make it visibility false.

How to get a background image to print using css?

10 Answers10

Linked

Related