3

Is there a cross-browser fix for enabling background-image in combination with background-size: cover; when printing a webpage?

I would appreciate all kinds of solutions even those using JavaScript!

Tim
  • 5,521
  • 8
  • 36
  • 69

1 Answers1

-1

Try following:

Add meta-tag on your page:

<link rel="stylesheet" href="print.css" media="print" />

In the print.css next tag:

#mydiv {background-image: url('link/to/imagefile'); background-size:cover; display:block;}

In the style.css (on screen):

 #mydiv {display:none}

Hopefully this helps you.

Erkan Yilmaz
  • 43
  • 1
  • 7
  • I don't think you understand what the problem is. Basically it is not possible to use the `background-image` property for printing media. However there are workarounds using html `img` tags and some styling. I am just hoping there is a workaround for the `background-size` property too. – Tim May 26 '14 at 13:53
  • @Tim: do you have a jsfiddle link with your issue? – Erkan Yilmaz May 26 '14 at 13:55
  • @Tim: did you refered to this one: http://jsfiddle.net/Ux4K6/3/ It's solved only with css – Erkan Yilmaz May 26 '14 at 15:48
  • Thanks for the effort, but the `background-size: cover;` does not seem to be working. Try it with a larger resolution to see what I mean. – Tim May 26 '14 at 16:11