Resize image in pdf export CSS

[Alicia Miller]

Hi All,

I'm trying to add a logo to our single page pdf exports but I cannot seem to resize the image within the stylesheet.

When I resize that actual image file manually it looks absolutely terrible when rendered in the pdf.

I'm no CSS expert so I was hoping someone might be able to tell me if I'm doing this wrong.

Thanks,

Alicia

@page:first

{

margin-top: 2in;

background-image: url(http://intranet1.aftrs.edu.au/download/attachments/5832706/AFTRS_RED_RGB.png?api=v2);

background-size: 50%;

background-repeat: no-repeat;

background-position:10% 6%;

}

[Steffen Heller · Accepted solution]

@Alicia:

Your reasoning makes sense for normal images. If you include a huge image, make it smaller in the wiki and then export to PDF, the image quality will be better (according to the real size of this image).

For a background image this is different, because you can't resize it. "background-size" would be the way to go but I guess that won't work because a) it is CSS3 which hasn't been supported by confluence and b) I tried it and it didn't work.

[Alicia Miller]

Thanks for confirming it doesn't work, was getting very confused!

Do you know if I can use any other css commands to acheive this? Can I only use background-image in the stylesheet?

Thanks,

Alicia

[Steffen Heller]

No, I don't know a CSS hack to resize a background image.

Another option to include a header/footer is using the Space Admin > PDF Layout (using HTML here). This will only work for space exports, though (Browse > Adanced > PDF export).

Perhaps there are other options, depending on the kind of logo you use.
If it is a simple "vectorlike" logo without colour gradients, the image quality won't be a topic at all. If you have your own font with that logo you can also include the font and just reference the "letter" that corresponds to the logo.

[Alicia Miller]

Hi, yeah unfortunately that's not possible for our logo.
And I need the logo on single page exports, not space exports.

Oh well, I suppose I'll submit a feature request!

Thanks for your help.

[Steffen Heller]

Just to get that right:

It is possible to export a single page with Browse > Adanced > PDF export, it is just not exactly what this option was intended for.

[Alicia Miller]

Yes, but that would require space admin privileges, correct?

[Alicia Miller]

Hey,

What i mean by "manually" is resizing it outside of confluence (eg in photoshop).

What I was tring to test was that if I used a large image and resized it in CSS whether it might improve the image quality (as the pdf rendering in confluence seems awful).

I usually do use relative URL's - this was a lazy test!

Thanks,

Alicia

[Steffen Heller]

Hi Alicia,

you do it right, basically. You can achieve that with a combination of background-image and background-repeat.

Two possible problems:

1. I don't think that confluence supports background-size. So instead you must make sure that the image already has the correct dimensions (resize it in Photoshop or whatever programm you use for that)
2. Use a relative URL. Attach the image to some confluence page, click on image properties and copy the URL path starting with "/download/attachments/..." and enter that at background-image.

PS: Don't know what you mean with "resize that actual image file manually..."

[Alicia Miller]

Hey,

What i mean by "manually" is resizing it outside of confluence (eg in photoshop).

What I was tring to test was that if I used a large image and resized it in CSS whether it might improve the image quality (as the pdf rendering in confluence seems awful).

I usually do use relative URL's - this was a lazy test!

Thanks,

Alicia