Menu
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;
}
}
369
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;
}
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. http://i.imgur.com/yvVW2mk.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
