Forum How do I...?

Is it possible to let a background-image spread over 2 pages?

melusina
Authors submitted a manuscript with an image file that has the size of 2 pages and that should stretch across 2 pages (verso -> recto). Is it possible to do that via princeXML CSS or do I have to split the image into 2 images by hand, putting them individually on its page respectively.

For now I tried the following approach (below) but instead of stretching to 2nd page it just repeats the image fragment from the 1st page again on the 2nd page. Here is my approach so far:

HTML

<div class="teidiv1" id="partA_chap1" lang="de">
            <h2 lang="de"><span class="head">Räume der Ermöglichung: Einleitung </span></h2>
            <p class="authors">
               Utan Schirmer
               </p>
            <p id="index.xml-p-d32e653">„Grundsätzlich – denke ich – geht es mir immer um ähnliche Fragen, also darum, kulturelle
               Formen und Orte für verschiedene Lebensweisen zu schaffen.“ Mit diesem Satz resümiert
               Josch Hoenes im Jahr 2012 in einem Interview für den Newsletter der Hannchen-Mehrzweck-Stiftung,
               was sein Engagement in den unterschiedlichen Feldern und an den Schnittstellen von
               Aktivismus, Wissenschaft und Kunst antreibt. In der Tat zieht sich die Frage danach,
               wie unterschiedliche Räume – als Verbindung konkreter, physischer Orte mit bestimmten
               kulturellen Formen und Praxen – die Lebbarkeit verschiedener geschlechtlicher und
               sexueller Lebens- und Begehrensweisen ermöglichen oder verhindern, durch sein Werk
               und aktivistisches Leben. </p>
               ...
</div>


CSS

#partA_chap1 > div:nth-child(1) { page: partA_chap1-cover; }

@page partA_chap1-cover {
    background-image: url("./media/weiss_blitze_sektionl_mc.jpg");
    background-size: auto 100%;
    background-repeat: no-repeat;
    @bottom-left { content: normal; }
}

#partA_chap1 > div:nth-child(1) > img { display: none;}

#partA_chap1 > div:nth-child(1) { page-break-after: left !important; }

#partA_chap1 > div:nth-child(1) > div.caption
{
    position: absolute;
    bottom: -7.5em;
    left: -4em;
    width: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    padding: 0.4em;
}


Result:

Screenshot 2023-04-03 160123.png

  1. Screenshot 2023-04-03 160123.png1.3 MB
howcome
It's possible to avoid splitting images by using the technique described here:

https://css4.pub/2022/float/#spreads

Edited by howcome

melusina
Ok, but this requires princeXML 14 at least, correct? We have a license for/using princeXML 12 still. Without the `defer` functionality it is not possible?
howcome
Correct, this solution depends on the fantastically powerful defer-* properties.

https://www.princexml.com/doc/css-props/#prop-float-defer-column
https://www.princexml.com/doc/css-props/#prop-float-defer-page

Edited by howcome

melusina
It seems, we really have to upgrade :D. Actually we have the license already but were hesitating. We were not sure about the extend to which we might have to expect things that break between 12 and 14. Do you have an undetermined gues if this can be an issue or should not necessarily be the case?
howcome
We recommend upgrading to Prince 15.1 which has a bunch of new features and fixes. I don't think you will have any problems, but testing before putting it into production makes sense.

Here are more guides to Prince 15 features:

https://css4.pub