Shopify themes, liquid, logos, and UX
Hi! I want to change the background image in each section of my shopify store, I have tried to do this via cusom css but it has not worked out.
I have used this code in custom css for only the section I am trying to change (check the image)
{
background: url("https://cdn.shopify.com/s/files/1/0820/7646/7541/files/prova_denna_2.jpg?v=1699213217")
no-repeat center;
background-size: cover;
}
what I'm trying to achieve is to get the same wavy design as there is on this section:
i managed to achieve this by editing the image banner before uploading it to shopify, now i want to change the background image on the next section to be the same.
storelink: https://624b34-3.myshopify.com/
passeword: lolipop
thanks in advance for any help!
Solved! Go to the solution
This is an accepted solution.
Because of the way such sections are design with sloppy class names and divs it's a mess of CSS class attribute-selectors to do this with a css band-aid.
You have to set the background for a full width element then in a bunch of children set their backgrounds to transparent if the section doesn't allow you to clear the colors.
AND possibly change other images on top to have transparency.
Roughly:
[class*='section-template--'] {
background: url(https://cdn.shopify.com/s/files/1/0820/7646/7541/files/prova_denna_2.jpg?v=1699213217) no-repeat center;
background-size: cover;
background-color: transparent;
}
.image-with-text__media, .image-with-text__content {
background-color: transparent;
}
Good Hunting.
If you need customization fleshed out then contact me by mail by for services , see contact info in signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
This is an accepted solution.
Because of the way such sections are design with sloppy class names and divs it's a mess of CSS class attribute-selectors to do this with a css band-aid.
You have to set the background for a full width element then in a bunch of children set their backgrounds to transparent if the section doesn't allow you to clear the colors.
AND possibly change other images on top to have transparency.
Roughly:
[class*='section-template--'] {
background: url(https://cdn.shopify.com/s/files/1/0820/7646/7541/files/prova_denna_2.jpg?v=1699213217) no-repeat center;
background-size: cover;
background-color: transparent;
}
.image-with-text__media, .image-with-text__content {
background-color: transparent;
}
Good Hunting.
If you need customization fleshed out then contact me by mail by for services , see contact info in signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Save time & money ,Ask Questions The Smart Way
Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com
Problem Solved? ✔Accept and Like solutions to help future merchants
Answers powered by coffee Buy Paul a ☕ Coffee for more answers or donate to eff.org
Thank you so much for the help, code works fine
User | RANK |
---|---|
207 | |
178 | |
63 | |
51 | |
47 |
On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023The year-end shopping season is just around the corner. Is a flash sale on your radar? Are...
By Jasonh Nov 6, 2023