I have a document that I'm converting to PDF using Prince. I want to have an overlay that will display a repeating text in demo envrionments so that generated documents can be marked.
Normally, I would apply such a watermark with an element like
<div id='overlay' style='position: absolute; top: 0; left: 0; background: url(watermark-demo-document.svg) repeat left top; width: 100%; height: 100%;'></div>
Prince, however, doesn't split absolutely positioned elements across page breaks, so the watermark will not be visible on any page apart from the first page. It was suggested that I put the watermark image in a page margin box, and then change the position of the box so that the image covers the page.
I've tried to do this to partial success, but I don't understand how to change the position of the page margin can so that it covers the whole page (can't make sense of this).
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
#page { size: A4; margin: 25mm 8mm 27mm 8mm; padding: 0 0 0 0; #top { content: flow(header) } }
body { margin:16mm; padding: 0; }
#overlay { flow: static(header); background: url(watermark-demo-document.svg) repeat left top; width: 100%; height: 100%; }
</style>
</head>
<body>
<div id='overlay'></div>
<p>Lorem ipsum...</p> <!-- multiple instances -->
</body>
</html>
At DocRaptor (we're a Prince-based HTML-to-PDF service), we recently did the same thing to apply watermarks to our test documents.
It's definitely hacky, but the only thing we found for "breaking out" of the page margin box is a large image. It seemed to be the only way to expand your content outside the margin box, and I wouldn't be surprised if Prince "fixed" this issue, making the hack unusable, in a future version.
For your example, it would mean modifying your overlay code to this:
<div id='overlay'><img src='blank.png' width='3000' height='3000'></div>
You'd want to fool around with those heights and widths to get your desired size.
Note: Having this image as an overlay may affect (or may not, I'm not sure) the links within your document.
We ended up with code that looked like this:
<div id='overlay'>
<img src='blank.png' width='3000' height='3000'>
<div style='position: absolute; bottom: 0; left: 0; top: 0; right: 0; background-repeat: repeat-x; background-image: url(background.png); background-size: 570px 11px; background-position: 0 8px;'></div>
</div>
Related
Is there a way to insert default page border to all the pages in the pdf?
There was any option found in mpdf. Any one help me ?
Create an image the same size as the paper stock you're using (A4, letter ect). Then set the image as a background on #page:
#page {
background: url(<?= __DIR__ ?>/background.png) no-repeat 0 0;
background-image-resize: 3;
}
Adjust the margins in #page so the text is displayed in-between your border.
Note: there's a bug in PDF.js that'll cause a blurry image to be displayed when using this method. It's fine when viewed in Adobe Reader though. If that's a problem, you can set an absolute-positioned Header or Footer and it'll do the same thing:
<style>
#page {
header: html_Header;
}
#background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<htmlpageheader name="Header">
<div id="background">
<img src="<?= __DIR__ ?>/background.png" />
</div>
</htmlpageheader>
I am trying to build a layout where I have two divs in the background that span 100% of the page and then a full height wrapper div of a smaller size for content that sits centered on the page. The issue I am having is while I can get the wrapper to sit correctly on top of the top div; I cannot get it to behave correctly on the bottom div. Here is an example:
html,
body {
height: 100%;
margin: 0 !important;
padding: 0 !important;
}
.index-banner {
background: #265f7a;
height: 60%;
width: 100%;
}
.wrapper {
background: #444;
height: 200%;
margin: 0 auto;
position: relative;
top: -60%;
left: 0;
right: 0;
width: 50%;
}
.footer-bg {
background: #888;
height: 250px;
position: relative;
top: -85%;
left: 0;
right: 0;
width: 100%;
z-index: -1;
}
<body>
<div class="index-banner"></div>
<div class="wrapper"></div>
<div class="footer-bg"></div>
</body>
Now the issue with the above code is by using a negative positioning, then I leave a massive gap at the bottom of the page. However I have also tried:
Using an absolute positioning on the wrapper div. Works perfect in keeping the page the correct size however then the bottom div floats to the bottom of the viewport
Using a faux method of making the bottom div look like a full width div by using a background image on body; unfortunately this just sticks it to the bottom of the viewport instead of the bottom of the page due to no content being between both background divs.
Now I have thought about keeping the wrapper occurring naturally between both of the background divs so they do not overlap at all and then put divs inside of those background divs lined up with the wrapper however that becomes a bit of a nightmare that I want to avoid because then I have to struggle to try and align the content that overlaps them as each of those "section divs" would have to be split into two (imagine trying to make a paragraph look like one because it is spread between two divs).
So my question is - am I going about this the wrong way and overlooking something that I could be doing differently to make this work?
Hey guys I simply cannot get this to work.
I have some content that is centred on the page using the margin: auto; "trick".
In this content I have an image. I need to make a color bar coming under the image continuing out to the sides of the browser. On the right side I need it to look like its coming up onto the image.
I have made this picture to try an graphically show what I mean: image
As you can see the bar runs from the left to the right side of the browser. The centred image is just placed on top of it and then an image positioned on the top of the image. But I haven't been able to get this working. Any one who would give it a go?
I tried positioning the bar relative and z-index low. This worked but the bar keep jumping around in IE 7-8-9. Centring the image wasn't easy either and placing that smaller image on top was even harder. It wouldn't follow the browser if you resized it. The problem here is that the user have to be able to upload a new picture so I cant just make a static image.
Please help I am really lost here
EDIT:
Tried the example below but when I run the site in IE 7-8-9 I have different results. link
I have made a jsFiddle which should work in Chrome and IE7-9: http://jsfiddle.net/7gaE9/
HTML
<div id="container">
<div id="bar1"></div>
<img src="http://placekitten.com/200/300"/>
<div id="bar2"></div>
</div>
CSS
#container{
width: 100%;
margin: 0 auto;
background-color: red;
text-align: center;
position: relative;
}
#bar1{
background-color: blue;
position: absolute;
top: 50%;
right: 0;
z-index: 1;
height: 30px;
width: 40%;
}
#bar2{
background-color: blue;
top: 50%;
left: 0;
z-index: 3;
height: 30px;
width: 40%;
position: absolute;
}
img{
text-align: center;
z-index: 2;
position: relative;
}
The key here is that the container is positioned relative, thus enabling absolute positioning of the child elements in relation to their parent. Use z-index to control how the elements are stacked.
A method I use for centering anything with css is:
.yourclass {
width:500px;
position:absolute;
margin-left:50%;
left:-250px;
}
'left' must be have of your width and then make it negative.
To date I have not experienced any problems with this.
I am making a very simple blog for my PHP project, but am having a simple problem. I can't get the image for my header to float all the way right.
I have a banner with some text on the left, I have a 1px slice repeating across the width of whatever resolution may be chosen (ensuring the banner fills any screen). I would like the image to always render on the right edge of the screen, again, independent of screen resolution. But it is coming in at a fixed position. Here is what I have written:
HTML:
<div id="header">
<img src="images/banner.jpg" alt="banner" title="Prairie"/>
<img class="right_image" src="images/banner_right_image.jpg" alt="elavator" title="prairie elevator"/>
</div>
CSS:
#header {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: url(images/banner_right.jpg) repeat-x;
z-index: 1;
}
#header.right_image {
float: right;
position: fixed;
top: 0px;
z-index: 1;
}
What is the issue here?
Thanks for any input.
You should separate #header.right_image so that it is #header .right_image
Also remove position: fixed from #header.right_image
This works:
#header .right_image {
float: right;
}
Example: http://jsfiddle.net/FTBWU/
A link to your site would help!
I always throw at the top of my header:
* { margin:0; padding:0}
You probably have padding or margins inherintly applied to your html or body tags depending on what browser you're using. Try that - and the is there a URL I can see the whole thing at?
I don't know how well the float works with a fixed positioned element. Maybe try something like this for your image?
#header .right_image {
right: 0px;
position: fixed;
top: 0px;
z-index: 1;
}
I have recently put together a working navigation bar.
I'm pleased with it, but unfortunately it isn't accessible.
When images are OFF, I would like to show replacement text in its place.
Is this easy to achieve with my example: http://pastebin.com/hXth7FSK ?
Many thanks for any pointers.
Michael
You can absolutely position a span inside the element so that it covers the text as this post from Dave Shea explains:
<h3 id="header" title="Revised Image Replacement">
<span></span>Revised Image Replacement
</h3>
/* css */
#header {
width: 329px;
height: 25px;
position: relative;
}
#header span {
background: url(sample-opaque.gif) no-repeat;
position: absolute;
width: 100%;
height: 100%;
}
The only limitation is this will not work for partially transparent images.
If you want to use background-images (I prefer background-images as well for navigations) you could absolutely position a blank image over it by adding this CSS: position: relative; z-index: 100; to all of the navigation elements with background images and then putting this in them:
<img src="pixel.gif" alt="Text to display when images are off" style="width: 100%; height: 100%; position:absolute; top: 0; left: 0; z-index: 50;" />
Then, when the images are off, the alt text of the blank image will show. This image will be under the element, but when images are off, you will be able to see the image's alt text. Also, this will work for partially transparent background images.
You can use this pixel.gif image.
Hope this helps.