Geek Answers Handbook

How to create a page title (image) for printing using css

I have an image and I would like to print it on all pages as the page title in the center. I tried different methods, but the image overlaps with the contents of the page. Here is my HTML and CSS.

HTML code

<div class="pageHeader" align="center">
<img width="600" height="150" src="logo.jpg" alt="logo">
</div>

CSS

<style type="text/css" media="print">
div.pageHeader
{
  position: fixed;
  top: 0;
}

I tried to find the perfect solution to my problem, and I still can’t solve it.

+4
source share
3 answers

Finally, I myself came up with a solution.

Using the position:fixedtitle, the title will overlap with the content below it. The best way is to tune existing code to tables and use cssthead { display: table-header-group; }

CSS

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

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

background-image div. .

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

css:

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

Now your imageglued to div. Check if it works (:

-1
source

More articles:


All Articles