How do you put a css background image into a .pdf


I have been having some wierd issues trying to format a generated pdf document using CSS.

This how I create the pdf from my cf template.

<cfdocument format=“pdf” >

<cfinclude template=“mypage.cfm”>


My first issue was that I was unable to get the generated pdf to recognise an attached css external stylesheet. Whenever I opened the pdf, it would not display any css formatting. However, when I embed the css into the document itself, it would work.

Currently, no matter what I do, I cannot seem to get the css background image to appear in the generated pdf document. I wrote a test css script like the one below into the mypage.cfm. The rest of the css formatting works, it’s just the background image property that fails to work.

<style type=“text/css”>

#testbox {
background-position:left top;



Does anyone have a similar experience? I am currently using CF 9.

Thanks for any valuable inputs. :wink:

Ok…I finally resolved my issue. :smiley:

Working with pdf’s is such a tricky issue as documentation is still not as detailed as I would like it to be.

Working with pdf’s is such a tricky issue as documentation is still not as detailed as I would like it to be.

You’re not the only one. But there’s so much html and css to cover… To make things worse the whole process is very finicky about some things. Makes it hard to tell what’s just not supported … and what’s a bug :wink: But it’s a complex process I guess.

But do share your solution, just in case anyone else runs into a similar problem :slight_smile:

The solution:

Well, in my case, and maybe in the case of some others who may have this same issue in future, on my hosting site, the way they configured the web servers causes CF to use HTTP to load style sheets. The effect of this is that linked style sheets and background images do not work as the paths are not relative anymore. I was fortunately able to come across a similar issue faced by another CF developer on some other forum board, and the solution was to add 'localURL=“true” ’ inside the <cfdocument> tag.


<cfdocument format=“pdf” localURL=“true”>

<cfinclude template = “somepage.cfm”>


When I utilized the method above, suddenly, like a miracle, my generated pdfs are able to work reasonably well with my css stylesheets again!:cool:

I hope my frustration and discovered solution will help some others who may be facing the same issue in future. Might be we could create a sticky for all matters relating to cf generated pdfs…:wink:

Have a great weekend all.


Most likely the issue was one of pathing. ColdFusion generated PDFs aren’t that fond of CSS.