** UPDATE: I went to the settings at which my PDF was being rendered, and changed size to "Letter" instead of "A4" **
So DOMPDF is supposed to render an html page, yet with the settings I have, it's not rendering the background image to be margin-less (the bottom and right side still have margins).
Here's my css code on the HTML page being rendered:
#page { margin: 0px 0px 0px 0px; }
body {
background-image: url(../../picture.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}
Yet When rendered as PDF, here's how it looks:
It might be doing this based on the settings that it outputs as, but I'm not sure. It's being rendered as an 'A4' paper, as 'portrait' layout.
How would I be able to make the margins go away, so that it stretches all the way horizontally and vertically?
Dompdf (up to and including 0.7.0) does not currently support the background-size CSS declaration. Until that is fully supported by dompdf you can position an image using fixed positioning. You need to know the dimensions of the page and the margins, so you might want to declare those in your styling.
Try this in 0.6 or newer:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style>
#page {
size: 8.5in 11in;
margin: .5in;
}
#bgimg {
position: fixed;
left: -.5in;
top: -.5in;
width: 8.5in;
height: 11in;
z-index: -999
}
</style>
</head>
<body>
<img src="picture.jpg" id="bgimg">
</body>
</html>
Related
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 want all (or just some) of my images getting resized automatically when I resize my browser window.
I've found the following code - it doesn't do anything though.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html>
CSS
body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
}
#contact {
float: left;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
How can I basically have a fullscreen design (with background-size: cover) and have div elements be at exactly the same position (% wise) when resizing the browser window, with their size also resizing (like cover is doing for the background)?
To make the images flexible, simply add max-width:100% and
height:auto. Image max-width:100% and height:auto works in IE7,
but not in IE8 (yes, another weird IE bug). To fix this, you need to
add width:auto\9 for IE8.
source:
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
for example :
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
and then any images you add simply using the img tag will be flexible
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
image container
Scaling images using the above trick only works if the container the images are in changes size.
The #icons container uses px values for the width and height. px values don't scale when the browser is resized.
Solutions
Use one of the following approaches:
Define the width and/or height using % values.
Use a series of #media queries to set the width and height to different values based on the current screen size.
This may be too simplistic of an answer (I am still new here), but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up. For example, there is one webpage I am working on where the logo must take up 30% of the screen size to look best. I played around and finally tried this code and it has worked for me thus far:
img {
width:30%;
height:auto;
}
That being said, this will change all of your images to be 30% of the screen size at all times. To get around this issue, simply make this a class and apply it to the image that you desire to be at 30% directly. Here is an example of the code I wrote to accomplish this on the aforementioned site:
the CSS portion:
.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}
the HTML portion:
<img src="logo_001_002.png" class="logo">
Alternatively, you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div (creating now class tags whenever needed), but I feel like that would cause a lot of extra work eventually. But, if the site calls for it: the site calls for it.
Hopefully this helps. Have a great day!
The following works on all browsers for my 200 figures, for any width percentage -- despite being illegal. Jukka said 'Use it anyway.' (The class just floats the image left or right and sets margins.) I can't imagine why this isn't the standard approach!
<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />
Change the window width and the image scales obligingly.
I'm trying this technique on a page. Used it before and it seemed to work fine, but now in Chrome and Firefox, no horizontal scroll bar is displayed (which is good) but horizontal scrolling still occurs on two-finger swiping (which is bad).
I found this bug report which describes the same behavior, but is marked resolved. I tested in Safari, and horizontal scrolling was prevented.
The code (virtually identical to the code from the CSS-Tricks example):
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style>
body {
overflow-x: hidden;
}
h1 {
position: relative;
background: hsla(0,0%,0%,0.8);
color: white;
width: 90%;
margin: 0 auto;
}
h1:before, h1:after {
content: "";
position: absolute;
background: hsla(0,0%,0%,0.8);
top: 0;
bottom: 0;
width: 9999px;
}
h1:before {
right: 100%;
}
h1:after {
left: 100%;
}
</style>
</head>
<body>
<h1>Title of Page with full browser width bars</h1>
</body>
</html>
Any help greatly appreciated.
EDIT: Adding in overflow-x to the html element does prevent horizontal scrolling, but sometimes leads to other display errors (on a more fleshed out page I made, a dropdown menu kept getting cut off, even though that should be an overflow-y thing) and doesn't explain why the scrollbar isn't there, but scrolling still works.
I know this question was asked a long time ago but hopefully this helps somebody. Try adding the overflow-x hidden style to the html tag as well, for example:
html, body{
overflow-x:hidden;
}
I would like to use an image as background. Unfortunately, when I set the Background-image property to url(myUrl), I get the image which repeats itself in the background in several row and column. I guess it's because the image its naturally small.
So, how to get the image to expends enough so that it does not repeat itself, but rather occupies all the back ground?
Thanks for helping.
you can use two methods;
javascript or css
Jquery has a solution called suppersized;
http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/
or with CSS:
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
AND HTML
<body>
<div>
<img id="background" src="image.jpg" alt="" title="" />
</div>
You probably want this:
http://css-tricks.com/how-to-resizeable-background-image/
Looks like the simplest way.
P.S.: You can't do it with pure background-image. You have to do it with different layer.
To prevent an image from repeating itself, and adjust the image size to fit the screen size, the following two CSS instructions will help out:
background-repeat: no-repeat;
background-size: cover;
You can have the property background-size in CSS3 for stretching a background image. But CSS3 isn't widely supported.
If you don't want to repeat the background image then you can use background-repeat: no-repeat.
This is the solution from W3Scools using CSS:
body,
html {
height: 100%;
width: 100%;
margin: 0;
}
.bg {
/* The image used */
background-image: url("https://marketplace.canva.com/BAAuU/MAD4tNBAAuU/1/s2/canva-egg-and-ceramic-rabbit-MAD4tNBAAuU.jpg");
/* Full height */
height: 100%;
width: 100%;
/* Center and scale the image nicely */
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="bg"></div>
<p>This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes.</p>
</body>
</html>
Is it possible to to have:
A patterned body background image for the main page,
Followed by another background image on top of the first one (this time a picture on the
right hand side, on edge of the page)
The content (using semi-trrasparent gif is overlayed across the body background images)
should be scrollable whilst both background images remained fixed.
Ideally css solution without script or hack
Please help as I am loosing my hair and sanity trying to figure how to get this to work.
Many thanks
Del
CSS example for two non-scrolling background images
Some browsers (Safari) allow (CSS3) multiple background images, but since these aren't yet universal, here's my solution.
For a start, you don't need a fixed position div. You can prevent the background image from scrolling by using:
background-attachment: fixed;
Use background-position to put the background top, bottom, center, right, left e.g.
background-position: top right;
And set background-repeat to the setting you want.
The CSS
The CSS below will give you two background images that don't scroll in the page background - set the width of #mydiv to whatever you want (or leave it unset for 100%) and its height to 2000px (just to test the scrolling), and use your image URLs instead of the example:
body {
background-image: url(body_background.gif);
background-attachment: fixed;
}
#mydiv {
position: absolute;
right: 0px; /* or whatever */
background-image: url(div_background.gif);
background-attachment: fixed;
}
The HTML
If you need a complete example, change the background image URLs and use this (obvious) HTML/CSS example as a starting point:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css">
body {
background-image: url(body_background.gif);
background-attachment: fixed;
}
#mydiv {
position: absolute;
top: 0px; /* 0 is default for top so remove or make > 0 */
right: 0px; /* or left, whatever you need */
width: 250px; /* or whatever you want */
height: 1500px; /* remove after testing! */
background-image: url(div_background.gif);
background-attachment: fixed;
}
</style>
</head>
<body>
<div id="mydiv">
the div
</div>
</body>
</html>
This probably isn't the most "correct" solution, but you can use a separate background-image for the HTML and body tags. IE
html {
background-image: url('images/bg_repeat.gif');
background-position: top center;
}
body {
background-image: url('images/splatter_top.png');
background-position: top center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
text-align: center;
}
You may do this using a mixture of background images and absolutely positioned divs/images:
the body gets the patterned background
the picture on the side is an image (or a dive with the image as background) that uses fixed positioning (i.e. uses the position:fixed css rule)
the content would be inside a div with the semi transparent gif as background.
I think that it would abtain what you need, everythign is doable in CSS except perhaps the fixed positioning for some versions of IE (namely IE6 and below) as position:fixed is available in IE from version 7 onwards only in "standards-compliant mode" (but this article may help: position:fixed for Internet Explorer)