Scale title page image to fit entire page when exporting Confluence space

Question

I was trying to create a title page with an image in Confluence. I wrote this HTML code in the "PDF Space Export Title Page" box:

<div class="fsTitlePage">
  <img src="/download/attachments/590719/titlepage.png" width:"100%" height:"100%" />
</div>

Then I defined fsTitlePage class in the PDF stylesheet:

.fsTitlePage
{
    page-break-after:always;
    padding:0px;
    height:100%;
    width: 100%;
}

The problem is that titlepage.png doesn't appear in full size in the exported PDF. How can I make it full size?

Answer 1

The following works for me in Confluence 5.5. This will scale the supplied image to fit exactly the indicated page size (8.5" x 11" in my example below, although you can use other sizes, as well as units like "cm" and "mm" too).

In either case, you will want to ensure that your image is of the correct proportions before you use it.

My primary change was to add an additional CSS rule to scale the image to the specific dimensions. I also fixed the illegal formatting of the width/height attributes in your img element in the HTML (although it admittedly did not seem to cause any problems).

<style type="text/css">
.fsTitlePage
{
    page-break-after:always;
    padding:0px;
    height:100%;
    width: 100%;
}

.fsTitlePage img
{
    width: 8.5in;
    height: 11in;
}
</style>

<div class="fsTitlePage">
 <img src="/download/attachments/590719/titlepage.png" width="100%" height="100%" />
</div>