CODEWITHSUNDEEP
htmlcssprintingimage
Techboy
Techboy

Reputation: 4444

How to get a background image to print using css?

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.

Upvotes: 32

Views: 102984

Answers (10)

Hady El-Hady
Hady El-Hady

Reputation: 367

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*/
  }
}

Upvotes: 10

Raj Kumar
Raj Kumar

Reputation: 61

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.

Upvotes: -3

Kon
Kon

Reputation: 27451

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.

Upvotes: 27

ashkufaraz
ashkufaraz

Reputation: 5307

Try this:

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

Upvotes: 1

Nasim Bahar
Nasim Bahar

Reputation: 115

<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

Upvotes: 0

Johann
Johann

Reputation: 12408

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)

Upvotes: 112

Dexter
Dexter

Reputation: 41

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

Upvotes: 3

Charlie
Charlie

Reputation: 421

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/

Upvotes: 42

kriti
kriti

Reputation: 17

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.

Upvotes: 0

xkeshav
xkeshav

Reputation: 54084

set media="print"

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

Reference

Upvotes: -1

Related Questions