How do i change background image by template (Source Theme)

Themes
1

Hello all
I made a 3 different hbs template to render different collections and I want to be able to have a background image for each templateat the moment I can do it by adding this style at the beginning of each Template:

<style>
    body {
      background-image: url("/assets/images/mybg.jpg")
}
</style>`

Blockquote
It does the work but I winder if there is a way to have a conditional statement to implement it automaticly using css variables acordingly with the hbs template i use
thanksin advance for any ideas
Claudio

2

So you’d want to update your templates to use a different class somewhere. If you apply that class (‘first-template’) on the body, then in your styles you would add:

<style>
    body.first-template {
      background-image: url("/assets/images/mybg.jpg")
}
</style>

If you apply to some element within the body, then instead:

<style>
    body:has(.first-template) {
      background-image: url("/assets/images/mybg.jpg")
}
</style>

Either way, then repeat for the other templates.

3

thanks, that was the solution I’m using at the moment however I wonder if there is a way to implement it in default.hbs or index.hbs with a conditional statement
trying to use an handlebars solution just to try to be more elegant :slight_smile: