Print single element on all printing pages

Question

Print single element on all printing pages

Asked 6 years, 10 months ago

Viewed 98 times

1

I’m developing a system WEB
and at the time of printing the screen I need to put at the end of each page a imagem, this is possible?

So far I have the following code:

.hide{
      display: none;
 }

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>

<!-- ISSO È criado dinamicamente com PHP  entao imagine um for -->

<!-- inicio do for -->
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<h1>conteudo do site</h1>
<!-- fim do for -->



<!-- tenho essa div -->
<div>
  <img src='https://www.codigofonte.com.br/wp-content/uploads/2013/10/url.jpg' width="200" />
<div>


</body>
</html>

In this example I have a div with the imagem I want to print at the bottom of every page regardless of the number of pages created.

Remember that the content is generated dynamically through a FOR

Related here

– Jorge.M

2018/02/23 at 15:05
thanks, but the media I know the problem is putting this div at the end of each page rsr @Jorgematheus

– Julio Henrique

2018/02/23 at 15:16

1 answer

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.

by Randrade • **21,612** points · Answer 1 · 2018-02-23T15:19:42+00:00

You can use the @print media for that reason.

Translating the text (Google Translate) we have it:

Intended for paged material and documents viewed on screen in printed view mode.

In summary, it will be applied at the time of viewing for printing.

For your specific example, we will also use the Paged media and others Medias Types.

Basically, we’ll start with the footer with the display:none. So it will not appear in normal page view.

footer {
  display: none;
}

At the time of printing, we will change to display:block and we can define other styles if you wish.

 footer {
    position: fixed;
    bottom: 0;
    display: block;
  }

We will also use the property page-break-Inside to have a page break.

In the example below I added other properties, but it’s just to better fit the example.

footer {
  display: none;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
    display: block;
  }
  p {
    page-break-inside: avoid;
  }
  html,
  body {
    width: 210mm;
    height: 297mm;
  }
}

<button onclick="window.print()">Imprimir</button>
<h1>
  Conteúdo
</h1>
<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent.
</p>

<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent. Quem
  num gosta di mim que vai caçá sua turmis! Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. In elementis mé pra quem é amistosis quis leo. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Em pé sem cair, deitado
  sem dormir, sentado sem cochilar e fazendo pose. Si num tem leite então bota uma pinga aí cumpadi! Não sou faixa preta cumpadi, sou preto inteiris, inteiris. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Cevadis im ampola pa arma uma
  pindureta. A ordem dos tratores não altera o pão duris.
</p>
<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent. Quem
  num gosta di mim que vai caçá sua turmis! Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. In elementis mé pra quem é amistosis quis leo. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Em pé sem cair, deitado
  sem dormir, sentado sem cochilar e fazendo pose. Si num tem leite então bota uma pinga aí cumpadi! Não sou faixa preta cumpadi, sou preto inteiris, inteiris. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Cevadis im ampola pa arma uma
  pindureta. A ordem dos tratores não altera o pão duris.
</p>
<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent. Quem
  num gosta di mim que vai caçá sua turmis! Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. In elementis mé pra quem é amistosis quis leo. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Em pé sem cair, deitado
  sem dormir, sentado sem cochilar e fazendo pose. Si num tem leite então bota uma pinga aí cumpadi! Não sou faixa preta cumpadi, sou preto inteiris, inteiris. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Cevadis im ampola pa arma uma
  pindureta. A ordem dos tratores não altera o pão duris.
</p>
<p>
  Mussum Ipsum, cacilds vidis litro abertis. Posuere libero varius. Nullam a nisl ut ante blandit hendrerit. Aenean sit amet nisi. Si u mundo tá muito paradis? Toma um mé que o mundo vai girarzis! Pra lá , depois divoltis porris, paradis. Sapien in monti
  palavris qui num significa nadis i pareci latim. Copo furadis é disculpa de bebadis, arcu quam euismod magna. Suco de cevadiss deixa as pessoas mais interessantis. Aenean aliquam molestie leo, vitae iaculis nisl. Mé faiz elementum girarzis, nisi eros
  vermeio. Manduma pindureta quium dia nois paga. Casamentiss faiz malandris se pirulitá. Atirei o pau no gatis, per gatis num morreus. Diuretics paradis num copo é motivis de denguis. Mauris nec dolor in eros commodo tempor. Aenean aliquam molestie leo,
  vitae iaculis nisl. Interagi no mé, cursus quis, vehicula ac nisi. Detraxit consequat et quo num tendi nada. Paisis, filhis, espiritis santis. Per aumento de cachacis, eu reclamis. Quem manda na minha terra sou euzis! Quem num gosta di mé, boa gentis
  num é. Interessantiss quisso pudia ce receita de bolis, mais bolis eu num gostis. Praesent malesuada urna nisi, quis volutpat erat hendrerit non. Nam vulputate dapibus. Praesent vel viverra nisi. Mauris aliquet nunc non turpis scelerisque, eget. Delegadis
  gente finis, bibendum egestas augue arcu ut est. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet. Sed non consequat odio. Leite de capivaris, leite de mula manquis sem cabeça. Viva Forevis aptent taciti sociosqu ad litora torquent. Quem
  num gosta di mim que vai caçá sua turmis! Tá deprimidis, eu conheço uma cachacis que pode alegrar sua vidis. In elementis mé pra quem é amistosis quis leo. Todo mundo vê os porris que eu tomo, mas ninguém vê os tombis que eu levo! Em pé sem cair, deitado
  sem dormir, sentado sem cochilar e fazendo pose. Si num tem leite então bota uma pinga aí cumpadi! Não sou faixa preta cumpadi, sou preto inteiris, inteiris. Mais vale um bebadis conhecidiss, que um alcoolatra anonimis. Cevadis im ampola pa arma uma
  pindureta. A ordem dos tratores não altera o pão duris.
</p>



<footer>
  <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" />
</footer>

As a result, we will have the Google logo on footer of all pages

If you want to read more about it, this question in Soen has several answers explaining how to get the same result.