4

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.

tacoshy
  • 10,642
  • 5
  • 17
  • 34
  • Duplicate http://stackoverflow.com/questions/20561776/creating-page-headeran-image-for-print – Surjith S M Dec 30 '13 at 11:49
  • @SurjithSM I tried that too.My problem still exists. –  Dec 30 '13 at 11:58
  • possible duplicate of [HTML Print Header & Footer](http://stackoverflow.com/questions/1360869/html-print-header-footer) – unor Dec 31 '13 at 12:32

3 Answers3

3

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; }
    }
-1

you can use this :

<div id="header">
<img width="600" height="150" src="logo.jpg" alt="logo"/>
</div>

<style type="text/css" media="print">
#header {
    height: ...px;
    border: solid;
    margin-left: ...px;
}
img {
    margin-left: ...px;
    z-index:...;
    position:absolute;
}
</style>
behzad
  • 194
  • 6
  • 21
  • 1
    I will try your answer and i will get back to you in a while. –  Dec 30 '13 at 07:39
  • 1
    it is not working.The Image is not appearing on all printed pages.It is appearing on the first page. –  Dec 30 '13 at 08:27
  • to include the header/footer on every page you might use server-side includes or if you have any pages being generated with PHP or ASP you could simply code it in to a common file. – behzad Dec 30 '13 at 13:13
  • My pages are generated by using Ruby On Rails.Could you tell how to code it in to a common file? –  Dec 31 '13 at 05:02
-1

Try with background-image on div. I do it all the time.

<div class='header'></div>

css code:

.header{
width:600px;height:150px;
background-image:url('logo.jpg');background-size:100% 100%;
}

Now your image it's glued to div. Check if it works (:

CaptainKnee
  • 139
  • 5