CSS Print, header only on first page width css

Question

I have a logo inside the Logo tags. For printing style i made a @print media query css. If i print it out the logo will printed on every page - but it should only shown on the first page.

Tried with that:

header { display:none; }
@page:first { 
  header { display:block; } 
}

but so the header will deleted on every pages! Any tipps? Thanks

@page:first header { display:block; } This is enough to do the magic — Selvam Elumalai, Dec 08 '16 at 12:12
Possible duplicate of [How to use HTML to print header and footer on every printed page of a document?](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document) — jafarbtech, Dec 08 '16 at 20:19
@SelvamElumalai @ page:first header { display:block; } not working for me — Imran, Jan 21 '21 at 15:11
@Imran, can you share you code so can I check the css together? — Selvam Elumalai, Jan 22 '21 at 16:11

Bandal Kali · Answer 1 · 2022-11-09T02:12:16.657

1

You should delete the code

header { display : none; }

because by setting the display property to none. The element will be hidden, and the page will be displayed as if the element is not there.

edited Nov 09 '22 at 02:12

answered Nov 09 '22 at 02:11

Bandal Kali

41
5

score 0 · Answer 2 · answered Jun 07 '23 at 11:42

here my css is

@page {
            size: 22cm 29.7cm;
            margin-left: 0mm;
            margin-right: 0mm;
            @top-center {
                content: element(headerOnly1Page)
            }
            @bottom-center {
                content: element(footerOnly1Page)
            }
        }

        div.footerOnly1Page {
            position: running(footerOnly1Page);
        }

        div.headerOnly1Page {
            position: running(headerOnly1Page);
        }

        @page :left {
            @top-center {
                content: ''
            }
            @bottom-center {
                content: ''
            }
        }
        @page :right {
            @top-center {
                content: ''
            }
            @bottom-center {
                content: ''
            }
        }
        @page :first {
            @top-center {
                content: element(headerOnly1Page)
            }
            @bottom-center {
                content: element(footerOnly1Page)
            }
        }

html is

<div class='headerOnly1Page'>
            my header
        </div>
<div class='footerOnly1Page'>
            my footer
        </div>
<div class='content' style="margin-left: 35px; margin-right: 35px">
    my    body
</div>

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. — DSDmark, Jun 10 '23 at 07:54

score -1 · Answer 3 · edited Oct 15 '21 at 21:11

-1

You can provide a condition to CSS telling it to not apply the header on any page except the first.

header { display:block; }
@page :not(:first) {
   header { display:none; }
}

The predicate :not(:first) prevents the header being displayed on subsequent pages.

edited Oct 15 '21 at 21:11

Bob Dalgleish

8,167
4
32
42

answered Oct 15 '21 at 14:17

Mujtaba Haroon

99
7

3

Doesn't work, sadly. I assume it's because you can only set basic css properties with :first: https://developer.mozilla.org/en-US/docs/Web/CSS/:first – Jonas Feb 12 '22 at 14:07
not working! 2022 – fetahokey Jun 18 '22 at 10:28

CSS Print, header only on first page width css

3 Answers3

Linked