Can I set up a different body background in every page?

Question

I want to use a background image for a page, not for the whole document

Answer 1

Not without customizing the output.

However, if you're comfortable writing custom CSS, it could be done.

Comments

Thank you. I'm not an expert in CSS and I've trying everything but with no luck. Do you know how to do it? That would be very helpful.

---

You have to attach the images as a Resource folder, then attach a .css file with rules for each page, e.g.,

.page[data-name="1"]{
   background:url("../resources/page-bg-1.png");
}
.page[data-name="2"]{
   background:url("../resources/page-bg-2.png");
}

Etc.

If that's outside your comfort zone, I would suggest connecting with a web developer. I'd be happy to recommend one. It shouldn't take them more than an hour or so.

---

Thank you but I tried every option with css and nothing worked. This one could be a solution but it’s not working. Have you tried it?

---

I have not yet. My code might even be wrong. It's just a starting point. This is not a supported feature, so that's why I would recommend contracting a web developer.

---

I have a similar question to this, however sounds like it may not be possible... I'd like to assign a different background colour (HTML colour) for each page/slide in my document. So essentially as you scroll through the pages, different full-screen background colours appear. I'd love to know if this is something that may be possible in the future? I've been trying to figure out a way to do this using background colours on separate pages, liquid objects etc, but ideally would like to easily assign a different background colour to each page. Any advice much appreciated on this topic! Thank you...

---

It's not easy and very tricky. The only way I've found is using "fixed boxed position":

- Scaling: none

- Show: for this page

- Pin to: Left / Top

It can be an object or a html with a background color, and it's importan to use z-index to move this layer to background. Its easier if you export in multi-web pages. With flipbook , every element must be positioning with "fixed box position"

This is how we did it. Take a look https://www.ces.es/memoria-interactiva-2021/#p=1

---

Thanks so much for your reply 'indesigners', I really appreciate the rapid response!

I've had a play round with the 'fixed boxed position' and this is a great feature, which does exactly what I need! The only part I'm not sure about is the 'z-index'... I've read up on this, online, however I can't get my head around how I would implement anything - do I need to insert specific code in the CSS section to achieve moving this layer to the background? Any help on this part of the issue would again be greatly appreciated! Many thanks in advance.

---

That's right. You have to do it with a new css. It's really easy, if you don't know how to use css maybe this can help you:

https://www.w3schools.com/CSSref/pr_pos_z-index.php

---

This is great, thank you! I'll have an experiment... not up on CSS particularly, so will see how I get on! Many thanks :-)

---

ok... struggling to grasp this! Basically I have a test document set up at 1366 x 768px, with a coloured background (frame filled with flat colour), that is set to:

- Scaling: stretch to fill

- Show: for this page

- Pin to: Left / Top

It's on it's own layer below all other layers. How would I get this simple colour frame to stick to the very back when I output the document with in5? Apologies if I'm being stupid here - it probably is very simple, but definitely struggling to understand what code I would need to put in! Any help would be amazing! Thank you...

This is a screenshot of the basic doc I have set up...

---

You have to add some code to the html created:

- find this line: <nav class="fixed-item-wrap">

There must be the something like this

<div id="item108101" class="pageItem fixed-pos-elem fixed-scaling-desktop hidden fixed-center-y fixed-center-x fauxgroup" alt="Rectangle" data-fixed-for="page" data-page-id="77855">

add at the end this: style="z-index:-1"

<div id="item108101" class="pageItem fixed-pos-elem fixed-scaling-desktop hidden fixed-center-y fixed-center-x fauxgroup" alt="Rectangle" data-fixed-for="page" data-page-id="77855" style="z-index:-1">