multiple background images on front pgae

[Ecumaster]

Hi

I am trying to add another picture on top of background image with following code:
@page front-page {
background-image: url(img/1.PNG), url(img/1.PNG); }
however, the second image doesn't display.

I know I can use the following example:
https://github.com/radu-pisoi/com.oxyge ... t-page.css
where the second image (author_cover_logo.png) is used in front-page-title element however, I am also displaying the title on front page and thus second picture overlaps the title:

image.png

Cheers.

[julien_lacour]

Hello Wojtek,

I assume you are using the DITA Map PDF - based on HTML5 & CSS transformation scenario and a recent version of Oxygen.
Oxygen PDF Chemistry currently doesn't support multiple background-image values.

One solution could be to combine both images into a single one then display this image as the front-page background-image.
Another solution could be to display the second image in a block above the title:

Code: Select all

@page front-page {
  background-image: url(img/1.PNG);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

*[class ~= "front-page/front-page-title"]::before {
  display: block;
  height: 200px;
  background-image: url(img/2.PNG);
  background-repeat: no-repeat;
  background-size: 300px 200px;
  content: "\2002";
}

Of course you can set the block below the title too by replacing ::before by ::after. And you can change the height and background-size values to match your requirements.

Regards,
Julien

[Ecumaster]

Thanks for help. I need to add second pic to automate.
I did some progress but I get very small image

I also figured out (not sure if correctly) that I need to add "content: '\A0'; " otherwise second pic is not rendered at all, so the final code is:

*[class ~= "front-page/front-page-title"]::after {
content: '\A0';
background-image: url(img/pics/DataMaster_screenshot.PNG);
display: block;
background-repeat: no-repeat;
background-size: 100%
}

and the result:

image.png

maybe the rest of code for fron page is interrupting:

@page front-page {
background-image: url(oxy_xpath('/*/@*[local-name()="front-page-bcg"][1]'));
background-position: 0% 0%;
background-repeat: no-repeat;
}
*[class ~= "front-page/front-page-title"] {
position: absolute;
left: 30px;
top: 470px;
color: black;
text-align: left;
margin-left: 1.5em;
margin-right: 1.5em;
padding-top: 1.5em;
font-size: 2.5em;
}

Thank you for help

[Ecumaster]

Hi Julien

so I tried one more solution (placing image into content):

*[class ~= "front-page/front-page-title"]::after {
content: url(img/pics/DataMaster_screenshot.PNG);
display: block;
background-repeat: no-repeat;
background-size: 300px 200px;
}
and result is better but image is scaled to 100% and I can't change it with background-size

image.png

[julien_lacour]

Hello Wojtek,

Could you try to set the height property like in the following example:

Code: Select all

*[class ~= "front-page/front-page-title"]::after {
  height: 200px;
  background-image: url(img/pics/DataMaster_screenshot.PNG);
  display: block;
  background-repeat: no-repeat;
  background-size: 100%
}

Regards,
Julien

[Ecumaster]

Thank you Julien
Works like a charm, and the width property too, which is better in my case