Search code examples
htmlcssheader

How to create a Page Header (an Image) for print using css

I have an image and I would like to print it on all pages as a page header in center. I tried different methods, but the image is overlapping with the page content. Here is my HTML and CSS:

div.pageHeader {
  position: fixed;
  top: 0;
}
<div class="pageHeader" align="center">
  <img width="600" height="150" src="logo.jpg" alt="logo">
</div>

I tried finding the perfect solution to my problem and I still can't able to solve.

Solution

  • Finally I myself came up with a solution.

    By Using position:fixed the header logo will overlap with the content which is underneath it.The best way is to tweak the existing code with tables and in your css use thead { display: table-header-group; }

    CSS:

       <style type="text/css" media="print">
    #logo
    {
      thead { display: table-header-group; }
    }