3

I face the same problem mentioned in this question, but for background-image, the answer for that question only supports filling the whole div with a certain solid color not an image.

My case is that I have a group of divs that I give each a different background-image like the following:

@media print {
  .AdultDentalChart .tooth .toothImage1 {
    background-image: url("@Url.Content("~/images/DentalChart.png")") !important;
    background-position: 0px 10px;
    -webkit-print-color-adjust: exact;
  }

Bear in mind that I am facing the same code in Bootstrap that needs to be overridden

* {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
Community
  • 1
  • 1
Mahdi Alkhatib
  • 1,954
  • 1
  • 29
  • 43

1 Answers1

3

You have two @@ in media print remove one of them. as OP commented this is has to due with the framework in use. - not an issue.

You have to set width/height when using background-image

CSS, comes from cascade, so the div has to come after the wildcard selector * to override it.

The demo is not using print of course.

@media {
  * {
    color: #000 !important;
    text-shadow: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  div {
    background-image: url("//dummyimage.com/200x200") !important;
    background-position: 0px 10px;
    -webkit-print-color-adjust: exact;
    height: 200px;
    width: 200px;
  }
}
<div>text</div>
dippas
  • 58,591
  • 15
  • 114
  • 126