Forum How do I...?

Add background image to chapter opener page only

DAntkowiak
I need help to add background image to chapter opener page only, page 1.
The background image will change for each chapter in the book.

This is the CSS I used. It is putting that bkg image on every page in the chapter, I only want image on 1st page of chapter.
I Tried div.chapter[id="id-1.5"]:first & div.chapter[id="id-1.5"]:first-child and no image showed up.

/*Ch Opener background images [id="id-1.5"]*/
div.chapter[id="id-1.5"] {
background-image: url('ia_5043_SpiritualPracticesBrain/ch1_opener.jpg');
background-position: 0 0;
background-repeat: no-repeat;
background-size: 4.125in auto;
background-image-resolution: 300dpi;
/*the following opens up a viewing area for the background image into the margin*/
margin-top: -.5in;
padding-top: .25in;
}

Because the image changes in every chapter opener I wasn't able to use @page body :first

Your help is greatly appreciated.
Donna
  1. 5043_SpiritualPracticesBrain_PREVIEW.pdf1.1 MB
  2. Prince_5043_SpiritualPracticesBrain.css23.4 kB
mikeday
You can prevent the background from repeating on the next page by applying "box-decoration-break: slice" to the chapter div.

This isn't very obvious and I think background-repeat should already be sufficient, we will investigate this.
DAntkowiak
Thank you very much Mike this worked!
mikeday
It turns out that this is the expected behaviour (just not expected by me!) because Prince has the default value of "clone" for box-decoration-break and that leads to backgrounds being repeated on each page.

Another approach could be to use a different named page for each chapter.