How to Get a Background Image to Print Using CSS

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

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.

How to get a background image to print using css?

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.

How to forcefully print background image in HTML?

By default, a browser will ignore background css rules when printing a page, and you can't overcome this using css.

The user will need to change their browser settings.

Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.

HTML

<div class"graph-image graph-7">
  <img src="graph-7.jpg" alt="Graph Description" />
</div>

CSS

.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}

@media print{
  .graph-image img{display:inline;}
}

Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.

Having said that, what you're doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that's what you should use.

How to make background of the print page different from other print pages?

I don't think you can accomplish this by using :second, as it doesn't seem to be a valid value.

See the Index of standard pseudo-classes.

And even if you would use just :first, I don't think the background image can be applied as stated in the above link.

Since you already tried different solutions but it didn't work, here's a solution for you.

Depending on your sites layout and requirements, you can estimate where you want to break the page, and surround that in its own container so you have full control on them when being printed.

See example code:

window.print();

body{   background-color: black;   margin: 0px;}.page-break{   height: 1054px;   width: 100%;   margin: 0px;   position: relative;}#first{background-color: green;}#second{background-color: pink;}h1{  padding-top: 5px;   text-align: center;   color: white;   margin: 0px; //Add margin 0px for the first div in page-break}h2{  text-align: center;  color: lightblue;}
@page {    margin: 0;}
@media print {    html, body {        //style body here    }.page-break{       page-break-before: always;   }        #first{    background-color: maroon;        -webkit-print-color-adjust: exact;    }   #second{    background-color: gray;      -webkit-print-color-adjust: exact;   }  #third{       //style the third page;  }}

<div class="page-break" id="first">   <h1>First Page header</h1>   <h2>Some text here </h2> </div>
<div class="page-break" id="second">   <h1>Second page header</h1>   <h2>Some text here </h2></div>
<div class="page-break" id="third">   <h1>Third page header</h1>   <h2>Some text here </h2></div>