Different background image on each page

OK so its easy enough to set a background image for ALL pages.
But how can you set a different image for each page?

i use f7+vuejs+webpack with scss.
but change the code to your needs. should be the same for css
SCSS:

.page-one {
  --f7-page-bg-color: red;
}
.page-two {
  --f7-page-bg-color: blue;
}

HTML (Pug, but its the same)

.page.page-one
  .page-content
    and here my page one content
...
.page.page-two
  .page-content
    and here my page two content

thanks.
I added the css as provide to my app.css file however I cannot get the page to display using the HTML provided. Just goes blank and obviously not parsing anything!

I assume you meant include the html code as per below?

div class=“page.page-one” data-name=“about”

html code:

<div class="page page-one">
    <div class="page-content">
        <and>here my page one content</and>
    </div>
</div>
...
<div class="page page-two">
    <div class="page-content">
        <and>here my page two content</and>
    </div>
</div>

got it. thanks for your help. all good now :slight_smile: