force browsers to print background colors of elements

Most browsers won’t print background colors, and print-only CSS can (or should) be set to force all text to be black so it looks good on a white background. But what about images? What if you have a logo with white text and a transparent background that’s normally displayed over a dark background? Webkit browsers support the -webkit-print-color-adjust: exact style, but that still leaves out Firefox.

This might be a very specific use case, but it’s one I found myself in recently. I found a solution on StackOverflow and adapted it a little to keep things simple:

.element-class {
  position: relative;
  overflow: hidden;
  background: transparent !important; /* if needed */
}
/* firefox can't be forced to print backgrounds, 
   but it will always print borders */
.element-class:before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  content: "";
  z-index: -1;
  border: 50px #666 solid; 
  /* IE spills the border outside the element, so don't
     set this border any larger than it needs to be */
}

Leave a Reply

Your email address will not be published. Required fields are marked *

*