I'm outputting some html via wkhtmltopdf, and using a custom header and footer.
The header html is as follows:
<!doctype html>
<html>
<head>
<style>
body {
font-size: 12px;
margin: 0;
padding: 0;
}
.page-header {
background: #2A5266 -webkit-linear-gradient(
left,
#cbd5da 0,
#cbd5da 50pt,
white 50pt,
white 75pt,
#cbd5da 75pt,
#cbd5da 100pt,
white 100pt,
white 125pt,
#2A5266 125pt,
#2A5266
);
height: 72pt;
border: none;
margin: 0;
padding: 0;
width: 100%;
position: relative;
display: block;
}
</style>
</head>
<body>
<div class="page-header">
</div>
</body>
</html>
The footer html is:
<!doctype html>
<html>
<head>
<style>
body {
font-size: 12px;
margin: 0;
padding: 0;
}
.page-footer {
background: #2A5266 -webkit-linear-gradient(
left,
#cbd5da 0,
#cbd5da 50pt,
white 50pt,
white 75pt,
#cbd5da 75pt,
#cbd5da 100pt,
white 100pt,
white 125pt,
#2A5266 125pt,
#2A5266
);
height: 26pt;
border: none;
margin: 0;
padding: 0;
width: 100%;
position: relative;
display: block;
}
</style>
</head>
<body>
<div class="page-footer"></div>
</body>
</html>
And the command that I'm using is as follows:
wkhtmltopdf -L 0cm -R 0cm -T 2.75cm -B 0.7cm -O landscape --footer-html http://foo.com/footer --header-html http://foo.com/header --header-spacing 5 http://foo.com/html output.pdf
Everything is working 100% correctly, but the header doesn't make use of the linear-gradient. Its almost like the linear-gradient is completely ignored, because the header is just a solid dark blue color. As you can see, the html for the header and footer are just about identical, so it doesn't make sense that it works for the footer, and not the header.
If I change the position:absolute on the header, then the header gradient appears, but that causes too many other issues.
In the end I used a table with an explicit width setting for each td element, and that works perfectly.