Hi-Res Backgrounds in CF PDF Generation

I came across an issue on the weekend where I had to include a background image for the entire page on a generated PDF using cfdocument. While this is normally something that in essence is a simple task by assigning a background image using css to the body element as you would a html page, the resulting PDF, being a hi-res printable document, starts to look pretty average. You could get away with it if you where tiling a background image to the background of the body as some sort of vertical gradient or a texture, but as a full page background, the 72 dpi image makes the document look cheap and nasty.

The fix is pretty easy and just requires thinking about the layout a bit more. Instead of assigning the background image through css to the body element we add a 300 dpi version of the image and force it to the page size by adding height and width attributes. Then for the rest of the document we add in a containing div positioning it absolute and giving it the page with and height dimensions. We are basically positioning a div over the top of the image giving the appearance of a background and maintaining the full 300dpi resolution of the image at the same time.

Examples:

Test 1 – using a full page background image (800px x 1132px @ 72dpi) – download


<cfdocument fontembed="true"
            format="PDF"
            marginbottom=".1"
            marginleft=".1"
            marginright=".1"
            margintop=".1"
            pagetype="A4"
            unit="cm">
    <cfdocumentsection marginbottom="0"
                        marginleft="0"
                        marginright="0"
                        margintop="0">
        <cfoutput>
            <html>
                <head>
                    <title>PDF Test</title>
                    <style type="text/css">
                        body{
                            background: url(/wsimages/pdfBuilder/bb-internalBackgroundHeader.jpg);
                            margin-top: 150px;
                            margin-left: 100px;
                            margin-right: 100px;
                            margin-bottom: 100px;
                            font-family:Georgia;
                        }
                    </style>
                </head>
                <body align="center">
<h1>HEY title</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
                        Phasellus hendrerit. Pellentesque aliquet nibh nec urna.
                        In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.
                        Sed pretium, ligula sollicitudin laoreet viverra, tortor
                        libero sodales leo, eget blandit nunc tortor eu nibh.
                        Nullam mollis. Ut justo. Suspendisse potenti.

                </body>
            </html>
        </cfoutput>

    </cfdocumentsection>
    <cfdocumentitem type="pagebreak"></cfdocumentitem>
</cfdocument>

Test 2 – using a full page image positioning content absolutely (2476px x 3504px @ 300dpi forced to 800px wide in image attributes) – download

<cfdocument fontembed="true"
			format="PDF"
			marginbottom=".1"
			marginleft=".1"
			marginright=".1"
			margintop=".1"
			pagetype="A4"
			unit="cm">
	<cfdocumentsection marginbottom="0"
						marginleft="0"
						marginright="0"
						margintop="0">
		<cfoutput>
			<html>
				<head>
					<title>PDF Test</title>
					<style type="text/css">
						##pageContainer{
							position: absolute;
							top:0px;
							left:0px
							width:800px;
							z-index:9999;
							margin-top: 150px;
                            margin-left: 100px;
                            margin-right: 100px;
                            margin-bottom: 100px;
                            font-family:Georgia;
						}

					</style>
				</head>

				<body align="center">
					<img width="800" src="/wsimages/pdfBuilder/bb-internalBackgroundHeader.jpg" />
<div id="pageContainer">
<h1>HEY title</h1>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
							Phasellus hendrerit. Pellentesque aliquet nibh nec urna.
							In nisi neque, aliquet vel, dapibus id, mattis vel, nisi.
							Sed pretium, ligula sollicitudin laoreet viverra, tortor
							libero sodales leo, eget blandit nunc tortor eu nibh.
							Nullam mollis. Ut justo. Suspendisse potenti.</div>
</body>
			</html>
		</cfoutput>

	</cfdocumentsection>
	<cfdocumentitem type="pagebreak"></cfdocumentitem>
</cfdocument>

2 Comments

  1. This is exactly what I’ve been trying to do for quite some time, unsuccessfully.
    I’m trying to use the second example and keep getting an error…The document is damaged and cannot be repaired.
    when I use a low res version of an image file I get no error but when I switch to 300dpi it cannot make the PDF.
    any ideas?
    thanks

    • Sorry for the delayed reply… sometimes (depending on your version of ColdFusion) you might need to use full paths to the images in the src attribute that look like:

      file:///D:\websites\mysite\myimages\myimage.jpg

      I found that I had to change the paths from my development machine to the live server but I can’t recall what the different versions of CF were.


Post a Comment

*
*