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>
Related
I am trying to get my background image to fit screen without stretching it.
My image rotates every time my website is shown.
Any help would be greatly appreciated.
body {
height: 100%;
margin: 0;
padding: 0;
}
Code for background image.
#page-background {
height: 100%;
left: 0;
position: fixed;
top: 0;
width: 100%;
}
Code for background image to rotate..
<div id="page-background">
<?php
//Add as many links you want
$mylink[1] = '<img src="http://www.zarias.com/wp-content/uploads/2015/12/61-cute-puppies.jpg" width="100%" height="100%">
<div id="download">
<a href="images/more.png" title="Download this image. Use of this image is restricted to wallpaper only"download>* Download This Image *</a>
</div>';
// this will count your links itself and select a random one
$id = rand(1,count($mylink));
// this will display the random link
echo $mylink[$id];
?>
</div>
Why don't try to use viewports? You can set the image size responsive to your browser. viewports
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>
I'm trying to setup a page background that scales with resolution but still looks nice.. heres what Im using..
The site is http://www.gd-gaming.com/wordpress, If you inspect it with firebug, it just doesnt load the image... but if I add that path straight into the css, it works.
Additionally, I use this same code on www.gd-gaming.com for that background and it works perfectly. Help needed!!
<div id="background"> <img class="background" src="images/bgmain.jpg" /> </div>
#background {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
img.background {
width: 100%;
}
fieldset, img {
border: 0 none;
}
You need to mak sure that images/bgmain.jpg really exists. I could not find it on your server. Instead, I replaced it with
<img class="background" src="/images/GDG/skyrimpapa.jpg">
on your /wordpress page (the dame image used on your home page) and it worked fine. Looks like either your image does not exist or you do not have permissions for that image set properly.
I have used a background image on the webpage and used this code in the css which makes it nicely resize when browser is resized.
body{
background: url("images/back.jpg") no-repeat ;
background-size: cover;
}
I need to place some other image on top of the background image at a specific place ( vase on table) .but when i do that then the background gets resized but the vase image remains in the same place and same size when browser is resized as shown in second picture below.
see the vase in these two images
browser in full size
resized browser
how can i make the vase image also get resized just like the background
I recently ran into exactly the same issue creating a hidden object game which needed images placed on top of a background image to maintain their position regardless of browser dimensions.
Here's what I did:
You can include a template version of the background image as an actual <img> with visibility:hidden (so it's not visible but still takes up it's space in the DOM and base the size (and background image size) based on that.
HTML:
<div class="image-container">
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png" class="img-template">
<div class="item"></div>
</div>
CSS:
/* This is your container with the background image */
.image-container {
background:url('http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png') no-repeat;
background-size:100%;
overflow-x: hidden;
position:relative;
}
/* This is the template that resizes the DIV based on background image size */
img.img-template {
visibility: hidden;
width:100%;
height:auto;
}
/* This is the item you want to place (plant pot) */
.item {
position: absolute;
left: 14.6%;
bottom: 80.3%;
width: 15%;
height: 15%;
background: yellow;
border: 2px solid black;
}
Here is a working example: http://jsfiddle.net/cfjbF/3/
Try making the image relative position and setting the alignment manually.
http://jsfiddle.net/cfjbF/1/
<head>
<style>
body {
background: #000000;
}
#image1 {
background: #008000;
position: relative;
left: 50px;
height: 50px;
width: 50px;
}
</style>
</head>
<body>
<div id="image1"></div>
</body>
Solution for your Problem:
https://stackoverflow.com/a/7660978/1256403
OR
http://buildinternet.com/2009/07/quick-tip-resizing-images-based-on-browser-window-size/
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.