nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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%;

}

Accepted answers

Steffen Heller

@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.

All comments

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:

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)
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

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

@Alicia:

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.

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence

confluence-administration