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

Thorny

@page:first header { display:block; } This is enough to do the magic – Hekate

Possible duplicate of How to use HTML to print header and footer on every printed page of a document? – Lustreware

@SelvamElumalai @ page:first header { display:block; } not working for me – Confection

@Imran, can you share you code so can I check the css together? – Hekate

Answer 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.

Casefy

Answer 2

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>

Consols

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. – Simmons

Answer 3

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.

Colloquium

Doesn't work, sadly. I assume it's because you can only set basic css properties with :first: developer.mozilla.org/en-US/docs/Web/CSS/:first – Shockey

not working! 2022 – Weeden