I am currently immersed in a project for my Bootcamp that involves creating a functional product with an aesthetically pleasing front end. I have chosen to utilize a .SVG as the background, set via CSS, and have successfully managed to alter the displayed SVG based on CSS media queries. However, I am intrigued by the idea of changing the background based on a value within the state/props.
The core concept of this venture revolves around an image viewer combined with a user rating system. My vision entails altering backgrounds according to the category of the photo, which is stored as a value within the array containing the photo/user data. For instance, if the category is "Dog," I wish to showcase a tailored background. Conversely, when transitioning to another photo belonging to the "Cat" category, I aim to display a distinct background. The animated SVGs used are crucial components of these backgrounds.
In order to execute this, I believe incorporating the code into the existing functions responsible for switching between displayed photos would be the most effective approach.
Your guidance on this matter would be greatly appreciated!