Override `background: transparent !important` for background-image in Twitter Bootstrap CSS

Question

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;
  }

Answer 1

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>