How to forcefully print background image in HTML?

by

By default, a browser will ignore background css rules when printing a page, and you can’t overcome this using css.

The user will need to change their browser settings.

Therefore, any image which you need to print should be rendered as an inline image rather than a css background. You can use css to display the inline image only for print though. Something like this.

HTML

<div class"graph-image graph-7">
  <img src="https://stackoverflow.com/questions/11242991/graph-7.jpg" alt="Graph Description" />
</div>

CSS

.graph-7{background: url(../img/graphs/graph-7.jpg) no-repeat;}
.graph-image img{display: none;}

@media print{
  .graph-image img{display:inline;}
}

Using this code, or similar code, means the image is used once in html and once in css.
The html version is hidden using css, and for print it displays as normal. This is a hack, but it will do what you want it to do. It will print the image.

Having said that, what you’re doing is terribly bad practice. Nothing which conveys meaningful information to the user should be conveyed using css alone. Not only is it semantically incorrect, but it makes the graph less useful to users. An inline image is much better, and if you can, that’s what you should use.

More Related Contents:

  1. Black image fade over image [duplicate]
  2. Image inside div has extra space below the image
  3. When to use IMG vs. CSS background-image?
  4. Fill SVG path element with a background-image
  5. What is the effect of encoding an image in base64?
  6. CSS Display an Image Resized and Cropped
  7. Is element block level or inline level?
  8. Is there an equivalent to background-size: cover and contain for image elements?
  9. Removing whitespace between HTML elements when using line breaks
  10. Make an image responsive – the simplest way [duplicate]
  11. How can I make all images of different height and width the same via CSS?
  12. How can I display just a portion of an image in HTML/CSS?
  13. Fullscreen responsive background image in CSS
  14. CSS image resize issue
  15. Floating an image to the bottom right with text wrapping around
  16. Protect image download
  17. How to make in CSS an overlay over an image?
  18. Scale image to fit a bounding box
  19. img tag displays wrong orientation
  20. How does one use the onerror attribute of an img element
  21. How to strike through obliquely with css
  22. How can I resize an image to a percentage of itself with CSS?
  23. How to “crop” a rectangular image into a square with CSS?
  24. CSS align images and text on same line
  25. How to auto-resize an image while maintaining aspect ratio
  26. CSS Border on PNG image with transparent parts
  27. Make Bootstrap’s Carousel both center AND responsive?
  28. Why use a sprite sheet rather than individual images?
  29. Use the HTML tag as a background image instead of the CSS background-image property?
  30. How to center image in a div horizontally and vertically

Leave a Comment