Hello everyone,
I’ve been trying to add this picture to the background but it seems like the picture became the background of everything like my feature collection and my footer. There’s some pictures to explain. Picture 1 and 2 are what I want my feature collection and my footer to look like and picture 3 is what I added but everything became the background if that makes sense.
I have used this code for the background:
.gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0755/5786/3702/files/snackbarbackground.jpg?v=1705458437) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
You can try to update your code to this
body {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0755/5786/3702/files/snackbarbackground.jpg?v=1705458437) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
Hey @Dan-From-Ryviu
I tried that and I added a header one as well if you go to my website (snackbarcanada.ca) there isn’t any showing behind the featured collection. I don’t want the background inside the boarder of the featured collection, if that makes sense..
Hi @Snackbarco
This is Richard from PageFly - Shopify Page Builder App
Please add this code to your theme.liquid above the to get this solved
Step 1: Online Stores > Themes > More Actions > Edit code
Step 2: click on theme.liquid and paste the code above the
body {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0755/5786/3702/files/snackbarbackground.jpg?v=1705458437) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
or
#MainContent{
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0755/5786/3702/files/snackbarbackground.jpg?v=1705458437) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
The gradient class you selected is for every element
Hope this can help you solve the issue
Best regards,
Richard | PageFly
Please update code to this and check again.
body,
.color-background-1 {
background: var(--gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0755/5786/3702/files/snackbarbackground.jpg?v=1705458437) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}
Beautiful! Thank you so much! Cheers!
Actually one more thing sorry! Is there a way to implement that into the mobile version as well?
Hey @PageFly-Richard
Is there a way to implement this to the mobile version as well?
Could you drop your store URL to check?
Please remove this bracket in your code to make it works on mobile
I removed it but the mobile site is still the same!
Please try to add code to the theme.liquid after element.
worked like a charm! Thank you so much again, life saver! Cheers!
This solution hasn’t worked for me. Any idea how to get it to work? Here is our URL https://coming-age.com/ We want to replace the gradient throughout the entire website with this https://cdn.shopify.com/s/files/1/0611/1690/7757/files/Texture_nuages_full_1.jpg?v=1678314654
Thanks!
