5

I want the same background image on every printed page. Anytime a page is needed because of overflow, it should have the same background image as the previous one.

I've been trying to do this

@page {
    size: US-Letter portrait;
    background-image: url("something.jpg");
    padding: 3in .5in .75in .5in;
}

But this doesn't work on any browser. Is this something that is simply not possible? Or is there some more tricks to it that I haven't yet found?

LanFeusT
  • 2,392
  • 5
  • 38
  • 53

2 Answers2

0

This way of getting it done works:

@media print {
    body {
        background: url("something.jpg");
    }
}

Also ensure also your browser settings about your printer let you to print a background. (In Firefox, it's the option tab in the dialog letting you choose your printer.)

Amessihel
  • 5,891
  • 3
  • 16
  • 40
  • That will not work though. It will print the background once. But it you have multiple pages, the background will not repeat for each page. – LanFeusT Feb 05 '19 at 17:12
  • @LanFeusT, it **does** work, the background **repeats** for each page, I just did the test (Firefox). – Amessihel Feb 05 '19 at 21:33
-1

For printing you might want to use the @media print media query instead of @page or combine them. Also the size property doesn't seem to have a valid value.

@media print {
  @page {
    size: letter portrait;
    background-image: url("something.jpg");
    padding: 3in .5in .75in .5in;
  }
}
SuperDJ
  • 7,488
  • 11
  • 40
  • 74
  • Thanks for noticing the size property. I don't think I need to wrap it in the media query as @page is meant for printing: https://developer.mozilla.org/en-US/docs/Web/CSS/@page I did wrap it just to check and confirmed it still doesn't work. – LanFeusT Feb 04 '19 at 20:07
  • 3
    Actually reading the @page description, it doesn't seem to support background-images at all... – LanFeusT Feb 04 '19 at 20:09
  • 2
    I can confirm that @page does not support background-image – valepu Nov 23 '21 at 08:40