Background Color is not showing in Prince xml

Question

I'm using PrinceXML to create PDF reports in my .Net application. I've created the report in HTML and it has few areas with background color. But when generating the PDF report using PrinceXML, those background colors are missing. I've tried replacing the background color with background image with width and height. Still they're not showing. It's like it has completely removed that CSS area.

Anyone came across any issues like this before? The PrinceXML documentation mentions that they support the background color and image.

Answer 1

Background Color

Prince seems to recognise border-color, but not color (text color) or background-color or background-image.

You can simulate a background color by using an after pseduo-element and a thick border. Prince renders this correctly.

CSS

.bgRED:after {
      content: "";
      display:block;
      border-top: 25px solid red;
      margin-top: -25px;
    }
.bgRED-ib {display: inline-block;}

HTML

<p class='bgRED'>This is a p with a red background</p>
<span class='bgRED bgRED-ib span6'>This is a span with a red background</span>

This requires that you know the height of the element in pixels to make it work.

Background Images

I'm trying a similar thing with making a background image 'water-mark' across the whole page

Prince ignored CSS like this: background-image: url(HUGE_sunset.jpg)

However I managed to get it to work using something like this:

HTML

<img class="behind" src='HUGE_sunset.jpg'>
<div class="infront">
     <p>with the lights out, it's less dangerous, here we are now entertain us </p>
</div>

CSS

.behind {position: absolute; width:100%; height:100%; z-index:1;}
.infront {position: absolute; z-index:500;}

Answer 2

Here is a css of backgorund image for Prince Pdf

<style>
@page{
          background: url(background.png) #ffffff;
          -webkit-background-size: 100%;
          prince-background-image-resolution: 72dpi;
          background-position: 0px 0px;}
</style>

by the way if you want to use bootstrap , use version 3.7

Answer 3

In the Prince docs it mentions that background-color defaults to transparent, and that color defaults to black. On a whim I tried adding the !important directive to my color/background-color styles and it worked.

I do not know what Prince has applied as its default style selectors in these cases, but it appears that it either applies its base styles after (or with some other more specific selectors) that necessitates this unpleasant !important war.

Without any way to inspect the applied styles it's a bit opaque, or I'd definitely recommend going a different route. Fortunately in my case the styles I need are specific to the Prince-generated pdf only. If you have styles you need to use both for Prince and web, I'd recommend posting it as a bug in the Prince forum and hope they fix it.