How to keep background image on printing

Question

I have HTML + CSS page that contains img element with background image in CSS.

In HTML:

<img class="symbol>

In CSS (Sass):

.symbol{
   background-image: url('../images/symbol.png');
   background-repeat: no-repeat;
   width: 50px;
   height: 50px;
   background-position: 15px, 15px;
}

It is shown correctly in Chrome but on printing (ctrl + P) its automatically remove the background but I need the image background also in the printed page.

How can I fix it?

I have `media: print` in my css file with no-print. what should i add in order to keep images? — haya, Dec 20 '17 at 12:22
Miquel Al. Vicens - Is there a way to override browser settings in css? — haya, Dec 20 '17 at 12:25
Because I want to improve performance. I want to reduce downloads - download all images in one file. I put all images in one big image (like grid) and every `img` have another `background-position` — haya, Dec 20 '17 at 12:35
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/161622/discussion-between-miquel-al-vicens-and-haya). — Miquel Al. Vicens, Dec 20 '17 at 12:36

score 1 · Answer 1 · answered Dec 20 '17 at 12:32

If you add

@media print {
  .symbol {
    background-image: url('../images/symbol.png');
  }
}

to your CSS your background image should show up while trying to print the page. If you still can't see it Chrome provides a few options on print page one of them being Background graphics, check it and your image should display.

How to keep background image on printing

1 Answers1