Change background for only Homepage Venture theme

Solved
Highlighted
Tourist
5 0 0

I added a background image to my website using this in theme.scss.liquid :

#MainContent {
    background-image: url({{ 'Concrete_Background_1.jpg' | asset_url }});
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

 

But now the background photo is on every page. How do I edit to make it only appear on the homepage? 

0 Likes
Highlighted
Excursionist
25 8 7

Hi,

Could you provide link to your store?

Kind Regards,

Emirates7

I am available for freelance work.
S: Emirates77777 | E: artur.sulkowski.1405@gmail.com | www.artursulkowski.com
0 Likes
Highlighted
Tourist
5 0 0

yes, here it is 

https://cetoolsinc.com/

I changed it back to a color as the background since it looked messed up on the product pages

0 Likes
Highlighted
Excursionist
25 8 7

This is an accepted solution.

Hi,

You have class template-index in body tag at homepage so you can change your code to:

 

.template-index #MainContent {
    background-image: url({{ 'Concrete_Background_1.jpg' | asset_url }});
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

 

I am available for freelance work.
S: Emirates77777 | E: artur.sulkowski.1405@gmail.com | www.artursulkowski.com
1 Like
Highlighted
Tourist
5 0 0

AHA, it worked! You are Amazing!

0 Likes
Highlighted
Tourist
5 0 0

Would you by chance know how to hide the photo on mobile? I rather keep a solid color background. 

Thanks

0 Likes
Highlighted
Excursionist
25 8 7

This is an accepted solution.

Hi,

 

.template-index #MainContent {
    background-image: url({{ 'Concrete_Background_1.jpg' | asset_url }});
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover
}

@media (max-width: 767px) {
.template-index #MainContent {
background: none !important;
}
}

 

Kind Regards,

Emirates7

I am available for freelance work.
S: Emirates77777 | E: artur.sulkowski.1405@gmail.com | www.artursulkowski.com
1 Like
Highlighted
Tourist
5 0 0

You are a godsent, thank you for taking the time to help!

0 Likes