cover.html page does not seem to respect mPDF styles

[ulyssia]

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?

[Gerrit Uitslag]

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

[Gerrit Uitslag]

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

[ulyssia]

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:

[Gerrit Uitslag]

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.