All geek questions in one place

Print background image on each page once

I need to print a background image on each page the time I print a large html file. Now it is printed only on the first page. So, the css part for this:

@media all { body { text-align:left; background-image:url('/C:/logo.png'); background-repeat:no-repeat; background-position:right top; } }
+6
source share
2 answers

If you specify the background-attachment property as fixed, it appears on every page. The only problem with this method is that the content may hang on top of it (and it only works 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 that the background image allows you to exchange the ratio of the print area (for example, Letter size 8.5x11 with a margin of 0.5 inches on all sides - 7.5: 10) and have a logo in the space field (for example, http: / /i.imgur.com/yvVW2mk.png ). Then you set the image to repeat vertically and 100%.

 <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>
+7
source

Be sure to include the CSS file on all pages.

 <link type="text/css" rel="stylesheet" href="style.css">
-3
source

Source: https://habr.com/ru/post/957589/

More articles:


All Articles