Member Avatar for pbpyrojust

Hey guys,

I'm trying to get the DIV backgrounds to show up when someone goes to print the page. All the text, embedded images come up just fine, now I need the DIV backgrounds to.

thanks,
Justin

  • 4 Contributors
  • 4 Replies
  • 118 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by FlashCreations

Dani AI

Generated

Several replies (notably , and ) touch on browser behavior and ink concerns. When a client insists on printed DIV backgrounds, two practical approaches work in the real world: (A) politely ask the browser to preserve colors (best-effort), and (B) make the decoration part of the page markup so printers will actually render it.

The best-effort CSS request for modern engines uses the print-color-adjust hint. It asks browsers to keep background colors/images, but it is not guaranteed and depends on user/printer settings:

@media print {
  /* ask modern engines to preserve colors/backgrounds */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .panel {
    background: #1a73e8 url('/images/decor.png') no-repeat center;
  }
}

For reliable results, convert decorative backgrounds into printable markup and show that only for print. Swap the screen-only background for an inline image used only when printing:

<!-- HTML -->
<div class="panel">
  <img class="print-bg" src="/images/print-bg.png" alt="" aria-hidden="true" />
  <div class="content">...</div>
</div>

/* CSS */
@media screen { .print-bg { display: none; } }
@media print  { .print-bg { display:block; position:absolute; top:0; left:0; width:100%; height:auto; z-index:-1; } }

Add a dedicated print stylesheet or a "printer-friendly" page as an alternate: reduce color blocks, keep only essential branding, and offer a PDF when exact visual fidelity is required. Test the result in multiple browsers and printer drivers, and keep a grayscale/low-ink fallback because many users or environments will still strip backgrounds. For details on the CSS hint, see MDN: print-color-adjust.

Recommended Answers

All 4 Replies

Member Avatar for opsryushi

I realize that this doesn't help your cause, but it's something to consider - I think that there are other things you could be dedicating your time to implementing on your website. In this age, the display of a web page when it is printed is simply... well, not important. The important part is that it looks good on the screen, cross-browser. That's the whole idea behind the web page, is that it's something of an alternative to the distribution of publications and propaganda by paper.

Member Avatar for pbpyrojust

Yeah I know this, but it is what the client wants! But I believe that are satisfied with how it is now. Thank you.

Member Avatar for buddylee17

Whether or not the background image is printed is up to the browser, nothing you can do with code. It's a setting in the browser which decides whether or not to send background images to the printer. In IE7, click Tools->Internet Options->Advanced. Click the check box under Printing for print background colors and images. It's probably something similar in other browsers. I have many clients require this and they all use IE so I'm not sure about the others.

Member Avatar for FlashCreations

Also, with the price of ink today, many people are using freeware programs to remove the background from printed documents to save ink and paper!!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.