Member Avatar for dantadin

If you check this website you will then see that those 3 houres are background images and when I print them, then they aren't visible on the paper! What's only visible is the text and images of the food and the person who is sitting and writing its computer.
Any idéa how I can make it visible in print as well?

  • 2 Contributors
  • 3 Replies
  • 162 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by drjohn

Dani AI

Generated

— the three “hours” are background images, so they’re being dropped by the printer. is correct that a browser setting can restore them for a single user, but relying on each printer/browser setting is fragile. If the graphic carries essential information (not just decoration), change the page so it prints reliably without asking the visitor to change preferences.

Two practical, developer-side fixes that work across most printers and PDF exports:

  1. Replace the decorative background with real content (an <img> or inline SVG) or add a print-only image. Keep the background for screen and show the inline image only when printing. Example strategy:
/* keep the decorative bg on screen */
.hours { background-image: url('hours.png'); }

/* print fallback: hide background and show inline image */
.hours .hours-img { display: none; }

@media print {
  .hours { background: none !important; }
  .hours .hours-img { display: inline-block; }
}
  1. If you still need the browser to try printing colors/backgrounds, use the print-color-adjust hint. It can help in WebKit/Blink and modern browsers, but it is not guaranteed if users’ settings or printers block backgrounds:
@media print {
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

See MDN for details on print-color-adjust and @media print (print-color-adjust, ).

Also consider accessibility: if the “3 hours” is meaningful text, include it as actual DOM text (visually styled on screen) or provide alt text for images. Test by printing to PDF in several browsers (Chrome, Firefox, Edge) to confirm the fallback behaves as intended.

Recommended Answers

All 3 Replies

Member Avatar for drjohn

That's right, that's exactly how browsers print things.

Unless you tell them otherwise. You can't write it in the code, you have to tell your own personal browser to print the background image. Web pages aren't actually intended for printing, but for viewing on a PC. With a black and white printer, printing background images would mess up any printout, so excluding them is the default way browsers work.

Member Avatar for dantadin

That's right, that's exactly how browsers print things.

Unless you tell them otherwise. You can't write it in the code, you have to tell your own personal browser to print the background image. Web pages aren't actually intended for printing, but for viewing on a PC. With a black and white printer, printing background images would mess up any printout, so excluding them is the default way browsers work.

Oh I see.
So I was looking everywhere in firefox (ctrl+p) printing options and I can't find it anywhere. And when I go to the printing options for the printer I can't find anywhere saying "Print our background images too". :(

Member Avatar for drjohn

In firefox File > Page Set-up > Format & Options, tick Print Background

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.