cover.html page does not seem to respect mPDF styles

[moninformateur]

Greetings,

I've tried to make this work for hours to no avail. I am unable to locate what doesn't work

In my custom template's style.css, I have added this:

body {
  background-image: url("/lib/plugins/dw2pdf/tpl/NewTemplate/cover_background.jpg");
  background-image-resize: 6;
}

This is in respect to mPDF "supported-css" documentation regarding background images. The URL does works.

When exporting a PDF, the background works for:

• even pages (TOC, Content pages)

The background does not work for:

• the cover page
• odd pages

Exemple PDF here: create_your_first_pages.pdf

Is there more documentation as to WHY this is the case, and HOW to define which pages will have a background?

Specifically, I'm trying to have a full page background on the cover page only. I have tried to add only this element with inline css, but again it is not honored

<div 
style="
background-image: url("/lib/plugins/dw2pdf/tpl/NewTemplate/cover_background.jpg");
background-image-resize: 6;
"></div>

Any ideas?

[Klap-in]

After a quick search, I'm wondering if the @page selector could help you? I guess with :first you can target only your first page. https://stackoverflow.com/questions/50275998/mpdf-use-background-image-for-full-page https://mpdf.github.io/paging/using-page.html

[Klap-in]

Is what you mean with that it only applies it on the even pages, but I have not yet an idea where to search for that issue. And here another example https://stackoverflow.com/questions/34606741/mpdf-different-background-for-first-page

[moninformateur]

Thanks to your information, I have tried the @page and it does seem to actually work. Here is the code I used:

@page first {  
  background-image: url(/lib/plugins/dw2pdf/tpl/NewTemplate/cover_background.jpg);
  background-image-resize: 6;
}
div.cover {
    page: first;
}
body {
  background-image: url("/lib/plugins/dw2pdf/tpl/NewTemplate/cover_background.jpg");
  background-image-resize: 6;
}

And in the cover.html

<div class="cover"></div>

However, the cover.html background image is also used by the "even" page that follows because I'm using the "doubled-sided" config. Is there any way to prevent this behavior, since I just want a cover page? Here's a picture of what I mean:

This is the cover_background.jpg, on the cover page:

And this is the even (blank) page automtically put there by the "double-sided" config, using the same background:

[Klap-in]

Aha, nice that you could make progress. If you like to see the entire input that is directed in to the mpdf library, then you could use some debug options that print the html instead of making a pdf. See https://www.dokuwiki.org/plugin:dw2pdf#how_to_collect_more_debug_info Maybe looking at that html gives ideas about what is going on.