I need to create print version of website, and as I mention in title I need to display site logo just on first page. For example, if I print home page, and I get 5 pages, logo should be displayed just on first page.
is it possible with @media print ?
What I've tried so far but does not work
@media print {
#top-menu,
#main-navigation-sticky-wrapper,
#action-bar,
.teaser-cda,
.pre-footer,
.footer,
.post-footer,
.header .logo {
display: none;
}
@page:first {
.header .logo { display:block }
}
The correct syntax (according to MDN) for first page is:
@page :first {
/* .... */
}
You don't have a space between the two components. Be wary, however, as compatibility for @page :first is not well-defined.
It might not even be necessary though. I don't think block-level elements get repeated on every page, so you might just need to ensure that the logo is displayed in @media print { ... }.
You will also want to check the element and it's container elements to ensure that none of them have position: fixed as that may also cause the element to repeat on each printed page.