Change background picture for only one section (dawn theme version 12)

Solved
Andreas1723
Tourist
12 2 5

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

custom css.png

 

what I'm trying to achieve is to get the same wavy design as there is on this section:

 

den här.png

 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! 

 

 

Accepted Solution (1)
PaulNewton
Shopify Partner
5931 537 1240

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


View solution in original post

Replies 2 (2)
PaulNewton
Shopify Partner
5931 537 1240

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


Andreas1723
Tourist
12 2 5

Thank you so much for the help, code works fine