Search code examples
javascripthtmlcsssass

HTML/CSS (SCSS) - Image on top of every printing page

So, I have a small and simple page that looks like this:

Page

Normal view in the browser works perfect and everything is how I want it to have (with all the styles [margin, padding,..] etc.).

Now, My problem, or rather my question, is about the print view of this page.

As you can see in the above image, there is the "seperator"-image. The content#1 can be sometimes smaller, sometimes bigger (with texts etc.).

When content #1 is too big I want the seperator-image to show on top of the second page.

Is there somehow a way to do that? (I think javascript has to be used for this (no jquery!).

A image to show what I approximately want for the print view:

print view

I hope everything is understandable, and thanks in advance!

Solution

  • CSS has a page-break-before property to include a page break before an element.

    If you combine it with @media print you can select the 2nd image there and page break then on print pages:

    @media only print {
  img:nth-child(2) {
    page-break-before: always;
  }
}