5

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 }
}
RLesur
  • 5,810
  • 1
  • 18
  • 53
Mile Mijatović
  • 2,948
  • 2
  • 22
  • 41

2 Answers2

3

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.

jeffjenx
  • 17,041
  • 6
  • 57
  • 99
  • 1
    Make sense. But when I define .header .logo { display: block; } in @media print { }, logo appear on every page again when I print the page and on print preview also. Any idea? – Mile Mijatović Apr 25 '17 at 06:22
  • 2
    Does the logo (or any of it's parent elements) have other styles applied related to positioning? I think `position: fixed`, and possibly `position: absolute` might cause it to repeat on each page. – jeffjenx Apr 25 '17 at 15:20
  • Yes, thats the clue. when I change position: fixed; to position: relative; works like a charm. Thank you – Mile Mijatović Apr 25 '17 at 18:00
  • @MileMijatovic I updated the answer to reflect this suggestion. – jeffjenx Apr 25 '17 at 19:00
0

@page rule is a CSS at-rule used to modify different aspects of a printed page property. It targets and modifies only the page's dimensions, page orientation, and margins.

It can't have css class inside.

@page :first {...} it just allows you to add these previous styles on the first page but you can't also add a class inside.

esther44
  • 53
  • 7