11

I need to print background image on every page once when I print big html file. Now it prints only on the first page. So the part of css for that is:

@media all {
    body
    {
        text-align:left;
        background-image:url('/C:/logo.png');
        background-repeat:no-repeat;
        background-position:right top;
    }
}
Donvino
  • 2,407
  • 3
  • 25
  • 34
  • An issue you're going to run into if you don't control the device doing the printing is that by default most browsers don't print background images and colors, you have to turn it on manually. – MyItchyChin Nov 07 '13 at 14:19
  • 1
    @MyltchyChin I have controll of the device, I print myself into pdf from html-it's a big html report and I need a logo on every page of the report. – Donvino Nov 07 '13 at 14:26

3 Answers3

11

If you specify the background-attachment property as fixed, it renders on every page. The only trouble with this method is that content can clip over top of it (and it only appears to work in FireFox).

<style type="text/css" media="print">
    body
    {
        background-image:url('/C:/logo.png');
        background-repeat:no-repeat;
        background-position: right top;
        background-attachment:fixed;
    }
</style>

Another option is for your background image to share the ratio of your printable area (i.e. Letter size 8.5x11 paper with .5 inch margins on all sides is 7.5:10) and to have the logo in a field of whitespace (e.g. https://i.stack.imgur.com/cahtB.png). Then you set the image to repeat vertically and be 100% sized.

<style type="text/css" media="print">
    body
    {
        background-image:url('/C:/whitespace-logo.png');
        background-repeat:repeat-y;
        background-position: right top;
        background-attachment:fixed;
        background-size:100%;
    }
</style>
MyItchyChin
  • 13,733
  • 1
  • 24
  • 44
  • This works in FireFox just fine, but it doesn't work in Chrome...Is there any way to make it work in Chrome? I mean the printing part. – Donvino Nov 07 '13 at 15:11
  • Is there any way to print image on every page in chrome browser? Beacause I convert my html to pdf and when I do it in firefox through foxitreader mozila disables all links from pdf and when I print to pdf from chrome it works perfectly...but it don't print the logo...I really need your help in this question... – Donvino Nov 07 '13 at 20:50
  • @Donvino - The second option I gave worked in Chrome – MyItchyChin Nov 08 '13 at 09:01
  • could you please show all the html file where it worked in chrome? May the page-break:after parameter affect it somehow? – Donvino Nov 08 '13 at 14:06
  • @Donvino - http://jsfiddle.net/DAC4m/ Set your print margins to .5in top/left/right/bottom or this demo won't work. If you want to change your print margins you'll need to change your .png dimensions to match. – MyItchyChin Nov 08 '13 at 14:18
  • I got the point- I use the album layout, could you tell me what size of picture should I use to properly adjust it to album layout? 1000x750? – Donvino Nov 08 '13 at 15:14
  • 1
    @Donvino - The size is irrelivant because the background-size property tells it to stretch. The ratio of height to width must match the print area. Thus if you have a 8.5x11 letter stock with .25 margins it's 8x10.5, if the margins are .5 then it's 7.5x10. – MyItchyChin Nov 08 '13 at 18:06
2

I found a way to print a background even on chrome by creating a div with position: fixed that acts as background. I had the idea when background-attachment: fixed didn't work, but it made me think about position: fixed on a div
This way the background is printed fully on every page even on chrome.

https://stackblitz.com/edit/web-platform-vlfqfz?file=index.html

HTML:

<body id="print-layout">
    <div class="bg-container"></div>
    <div class="content">
      <h1>Hello there!</h1>
      Long content...
    </div>
</body>

CSS

body {
  width: 100%;
  height: 100%;
  margin: 0;
}


.bg-container {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 0;
  background-image: url(https://imgur.com/cjmB60j.jpg);
  background-size: 100% 100%;
}

.content {
  position: relative;
  z-index: 1;
  padding: 140px 55px;
}
Dharman
  • 30,962
  • 25
  • 85
  • 135
valepu
  • 3,136
  • 7
  • 36
  • 67
-4

Be sure to include the CSS file on all pages.

<link type="text/css" rel="stylesheet" href="style.css">
Banananana
  • 17
  • 3