Looking for a unique background-image for each page in my app is proving to be challenging. Currently, I have defined the background-image in style/app.scss.
@import 'variables';
@import 'page_transition';
@import url('https://fonts.googleapis.com/css?family=Work+Sans&display=swap');
body{
font-family: 'Open Sans', sans-serif;; // Global font definition
background-image: url('../../static/background.png');
background-repeat: no-repeat;
background-color: $darkPurple;
scroll-behavior: smooth;
}I've attempted:
Adding the background url dynamically to the wrapper in the default layout. Result: The wrapper is not the body, so it did not yield the desired outcome.
Also tried adding
body {
background-image: url('../../static/background.png');
}in the <style> of each page with scoped. Result: Styling applied to body is disregarded.
Tried without scoped as well.
Result: Every page ended up having the same background.
Throughout these trials, I made sure to comment out the css line defining the background in style/app.scss