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