How can I force browsers to print background images in CSS

Question

This question was asked before but the solution is not applicable in my case  I want to make sure certain background images are printed because they are integral to the page   They are not images directly in the page because there are several of them being used as CSS sprites    Another solution on that same question suggests using list-style-image  which only works if you have a different image for every icon  no CSS sprites possible   Aside from creating a separate page with the icons inline  is there another solution

User · Answer

I found a way to print the background image with CSS. It's a bit dependent on how your background is laid out, but it seems to work for my application.

Essentially, you add the @media print to the end of your stylesheet and change the body background slightly.

Example, if your current CSS looks like this:

body {
background:url(images/mybg.png) no-repeat;
}

At the end of your stylesheet, you add:

@media print {
body {
   content:url(images/mybg.png);
  }
}

This adds the image to the body as a "foreground" image, thus making it printable. You may need to add some additional CSS to make the z-index proper. But again, its up to how your page is laid out.

This worked for me when I couldn't get a header image to show up in print view.

User · Answer

You have very little control over a browser s printing methods  At most you can SUGGEST  but if the browser s print settings have  don t print background images   there s nothing you can do without rewriting your page to turn the background images into floating  foreground  images that happen to be behind other content

User · Answer

Make sure to use the  important attribute  This dramatically increases the likelihood your styles are retained when printed    example1       background url image png  no-repeat  important      example2       background-color   123456  important

User · Answer

Browsers  by default  have their option to print background-colors and images turned off  You can add some lines in CSS to bypass this  Just add          -webkit-print-color-adjust  exact  important       Chrome  Safari        color-adjust  exact  important                    Firefox      Note  It s not working on the entire body but you could speciy it for a inner element or a container div element

User · Answer

You can use borders for fixed colors    borderTop  solid 15px black    and for gradient background you can use       box-sizing  border-box      border-style  solid      border-top  0px      border-left  0px      border-right  0px      border-image  linear-gradient to right  red  blue  100       border-image-slice  1      border-width  18px

User · Answer

Use psuedo-elements   While many browsers will ignore background images  psuedo-elements with their content set to an image are technically NOT background images   You can then position the background image roughly where the image should have gone  though it s not as easy or precise as the original image    One drawback is that for this to work in Chrome  you need to specify this behavior outside of your print media query  and then make it visible in the print media query block   So  something like this      image before          visibility hidden          position absolute          content  url  your image path               media print    image     position relative             image before         visibility visible         top etc                     The drawback is that the image will often be downloaded on normal page loads  adding unnecessary bulk   You can avoid that by just using the same image path you d already used for the original  visible image

User · Answer

Like  ckpepper02 said  the body content url option works well  I found however that if you modify it slightly you can just use it to add a header image of sorts using the  before pseudo element as follows    media print     body before   content  url img printlogo png        That will slip the image at the top of the page  and from my limited testing  it works in Chrome and the IE9  -hanz

User · Answer

https   gist github com danomanion 6175687 proposes an elegant solution  using a custom bullet in place of a background image      a logo        display  list-item       list-style-image  url     images desired-background png         list-style-position  inside         By including this within a    media print       block  I m able to replace a white-on-transparent logo on the screen  rendered as a background-image  with a black-on-transparent logo for print

User · Answer

it is working in google chrome when you add  important  attribute to background image make sure you add attribute first and try again  you can do it like that       inputbg   background  url  inputbg png    important

User · Answer

You can do some tricks like that    lt style gt       page           size  21cm 29 7cm          size  landscape           margin  30mm 45mm 30mm 45mm                whater          opacity  0 05          height  100           width  100           position  absolute          z-index  9999         lt  style gt    In body tag    lt img src  YOUR IMAGE URL  class  whater   gt

User · Answer

Browsers  by default  have their option to print background-colors and images turned off  You can add some lines in CSS to bypass this   Just add           -webkit-print-color-adjust  exact  important       Chrome  Safari        color-adjust  exact  important                    Firefox

User · Answer

With Chrome and Safari you can add the CSS style -webkit-print-color-adjust  exact  to the element to force print the background color and or image

User · Answer

The below code works well for me  at least for Chrome    I also added some margin and page orientation controls  portrait  landscape    lt style type  text css  media  print  gt   media print     body  -webkit-print-color-adjust  exact      page       size A4 landscape      margin-left  0px      margin-right  0px      margin-top  0px      margin-bottom  0px      margin  0      -webkit-print-color-adjust  exact     lt  style gt

[css] How can I force browsers to print background images in CSS?

Examples related to css

Examples related to printing

Examples related to background-image