need help with background image (dawn theme)

Snackbarco · ‎01-16-2024

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;
}

Dan-From-Ryviu · ‎01-16-2024

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;
}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎01-16-2024

Please try to add code to the theme.liquid after <head> element.

<style>
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;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Dan-From-Ryviu · ‎01-16-2024

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;
}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Snackbarco · ‎01-16-2024

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..

Dan-From-Ryviu · ‎01-16-2024

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;
}

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Snackbarco · ‎01-16-2024

Beautiful! Thank you so much! Cheers!

Dan-From-Ryviu · ‎01-16-2024

You are very welcome!

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Snackbarco · ‎01-16-2024

Actually one more thing sorry! Is there a way to implement that into the mobile version as well?

Dan-From-Ryviu · ‎01-16-2024

Could you drop your store URL to check?

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Snackbarco · ‎01-16-2024

snackbarcanada.ca

Dan-From-Ryviu · ‎01-16-2024

Please remove this bracket in your code to make it works on mobile

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Snackbarco · ‎01-16-2024

I removed it but the mobile site is still the same!

Dan-From-Ryviu · ‎01-16-2024

Please try to add code to the theme.liquid after <head> element.

<style>
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;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Snackbarco · ‎01-16-2024

worked like a charm! Thank you so much again, life saver! Cheers!

comingage · ‎04-29-2024

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!

PageFly-Richard · ‎01-16-2024

Hi @Snackbarco

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> 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 </head>

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 let me know if it works by giving it a Like or marking it as a solution!

➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)

All features are available from Free plan. Live Chat Support is available 24/7.

Snackbarco · ‎01-16-2024

Hey @PageFly-Richard

Is there a way to implement this to the mobile version as well?