Page 1 of 1
multiple background images on front pgae
Posted: Wed Aug 30, 2023 6:42 pm
by 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.
Re: multiple background images on front pgae
Posted: Mon Sep 04, 2023 12:59 pm
by 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
Re: multiple background images on front pgae
Posted: Wed Sep 06, 2023 6:37 pm
by 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
Re: multiple background images on front pgae
Posted: Wed Sep 06, 2023 6:50 pm
by 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
Re: multiple background images on front pgae
Posted: Thu Sep 07, 2023 9:59 am
by 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
Re: multiple background images on front pgae
Posted: Thu Sep 07, 2023 6:59 pm
by Ecumaster
Thank you Julien
Works like a charm, and the width property too, which is better in my case