Add image (company logo) in header section, while creating custom.css

[dpksaini]

Hi
I am trying creating a custom.css file for custom pdf output. I need my company logo to be on the header. Have written:

Code: Select all

@page :right {

        @top-left {

            content: string(maptitle)  string(chaptertitle);

            font-size:8pt;

        }

        @top-right {

            content:url("logo-5.png");

            width: 300px;

            height: 100px;

            image-resolution: 300dpi;

            }

But the image is not coming on the generated pdf.
The image is placed in the "C:\Program Files\Oxygen XML Editor 19\frameworks\dita\DITA-OT2.x\plugins\com.oxygenxml.pdf.css\css\img" folder.
Please suggest the resolution to my issue.

[radu_pisoi]

Hi,

The image should be stored relative to your custom CSS. In you case, it should be in the same folder with your custom CSS.

Please note it is not recommended to modify the files from the installation folder because this will make difficult to upgrade to a newer oXygen version (to migrate your customizations).

[satyamkatiyar]

Hi
I am trying to align my company logo to the top (without giving any margin) creating a custom.css file for custom pdf output.

Using the below code:

Code: Select all

	@top-right {
        content: url("logo.png");
        width: 49.634px;
        height: 49.449px;
        image-resolution: 480dpi;
        padding-top: 0in;
    }

But still, I can see some minor margin between the top and the logo. Please help.

[julien_lacour]

Hello,

Could you indicate which default size is logo.png? It is available in its properties.
You can also check in the documentation how to set a background image.

We will try to reproduce it on our side.

Regards,
Julien

[satyamkatiyar]

image.png

[Dan]

I see from the image properties screenshot that the image is a perfect square, while in the CSS you are using slightly different values for the width and for the height.
To get perfect alignment of graphical elements in the page, we recommend using a single background image for the entire page, as in the link posted by Julien, instead of separate images assembled using page margin box selectors, like top-left, top-right, etc..
Many regards,
Dan