How can I set a background image for my home page only?

I am almost done with my design. Only one thing remains. I want my background image on my home page only. So when I open up a menu as such as a product page or legal rights page I want to have a basic background with background color.

How can I limit my background image to my home page only?

my shop url: https://gadget-daddy.com/

It might require some minor edits to the theme code. I could take a look at it for you if you’d like.

How are you currently setting the background image?

Hey,

this is my current background coding which I added on the bottom of the base.css file.

You’ll need to make a few changes using a bit of liquid code, and then also change the class names for your background CSS. Basically you need to use some conditional logic to only include the background image CSS on the homepage, and then come up with custom class names for your CSS code so that you can include those classes only when the liquid conditional logic is met.

Makes sense. However I got 0 coding knowledge and everything I learned up until now I tought my self within 24 hours… It would be awesome if you could help me with the coding but I could search up the rest on my own as well. You have already helped me. Thank you a lot

Just posting the solution here in case anyone else has a similar issue.

You can achieve this by putting all of your CSS in a Custom Liquid section on your homepage via the editor:


1 Like