Adding two background-images on my frontpage

[romane]

Hi there!

I'm trying to add two different background-images on my frontpage:

• One that is common for every document and that never changes.

• One that changes for every document and that is defined in the bookmap using:

  Code: Select all

  <prodinfo>
      <prodname>TopSolid'Cam<data name="background" value="images/bg_image.jpg" format="jpg"/></prodname>
  </prodinfo>

In my CSS, I tried to add:

Code: Select all

@page front-page { 
      background-image: url("images/bandeau.png"), url(oxy_xpath("//*[contains(@class, 'bookmap/bookmeta')]//*[contains(@class, 'topic/data')][@name='background']/@value"));
      background-repeat: no-repeat, no-repeat;
      background-position: 0cm 16.5cm, 0cm 0cm;
      background-size: 100%, 20%;
}

But it doesn't work, only the first image (bandeau.png) is displayed.
I tried to change the order and add the

Code: Select all

url(oxy_xpath("//*[contains(@class, 'bookmap/bookmeta')]//*[contains(@class, 'topic/data')][@name='background']/@value"));

first, but the same problem occurs, I only get one of the two images (the first declared in the background-image element).

I also tried to make both images kind of small, as I thought they were maybe overlapping, but no.

To sum up, what I'm trying to do is :

• A footer that never changes

• An image that takes 2/3 of my front page

• Ideally a logo that will be in the header

If this feature is not supported by oXygen Chemistry, do you have any suggestion that might work?

Best regards,
Romane

[julien_lacour]

Hi Romane,

Currently Chemistry doesn't support having two values for background-image property.
Instead you can use a CSS looking like the following one:

Code: Select all

@page front-page {
  background-image: url("cover.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;

  @top-left {
    content: " ";
    background-image: url("logo.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-color: black;
  }
  @top-center {
    content: " ";
  }
  @top-right {
    content: " ";
  }

  @bottom-left {
    content: " ";
    background-image: url("footer.png");
    background-repeat: no-repeat;
    background-position: 50% 50%;
  }
}

I also attach some useful links that will help you understanding what I gave you above:
https://www.oxygenxml.com/doc/versions/ ... over_image
https://www.oxygenxml.com/doc/versions/ ... the_header

Of course you can still use the oxy_xpath("//*[contains(@class, 'bookmap/bookmeta')]//*[contains(@class, 'topic/data')][@name='background']/@value") query as the property value, this is totally valid.

You may need to fine tune your images and/or the background-position percentages, but what I gave you should work.

Regards,
Julien

[romane]

Hi Julien,

Thank you very much for your help, works perfectly fine!

Have a nice day,

Romane