How to Make Multi-Row Section Background Transparent

Store Design
1

Hey there, I am currently using a photo as the background of my entire store by using the following code inside base.css:

gradient {
background: var(–gradient-background);
background-attachment: fixed;
background-image: url(https://cdn.shopify.com/s/files/1/0818/7789/3427/files/Stained_Glass_Pattern.jpg?v=1695568145) !important;
background-color: transparent !important;
background-position: top left !important;
background-size: auto !important;
}

This code is working great but the multi-row section is also having this background reapplied to the section and it looks a little off compared to the rest because it is doubling up on the image (see image below). Is there a way to make this multi-row section background ‘transparent’ so that the main image is just showing the background like the rest of the sections?

WK100_1-1695844950285.png
WK100_1-1695844950285.png1845×788 181 KB

Website: https://g2o8e504fr8y8rbg-81877893427.shopifypreview.com

2

Hi @WK100

That will be the back ground of your entire store cause you used the gradient selector.

Try this one to change the background of the sections.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.image-with-text__content.image-with-text__content--top.image-with-text__content--desktop-left.image-with-text__content--mobile-center.image-with-text__content--adapt.content-container.gradient.color-background-1 {
    background: white !important;
}
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media {
    background: white !important;
}
3

Thanks! But instead of white, can I make it transparent so the image background still shows?

4

Yeah just change the word red to transparent. Like this.

.image-with-text__content.image-with-text__content--top.image-with-text__content--desktop-left.image-with-text__content--mobile-center.image-with-text__content--adapt.content-container.gradient.color-background-1 {
    background: transparent !important;
}
.image-with-text__media.image-with-text__media--adapt.gradient.color-background-1.global-media-settings.media {
    background: transparent !important;
}

And Save.

Result:

Made4uoRibe_0-1695847251760.png
Made4uoRibe_0-1695847251760.png1234×476 114 KB

I like more if its transparent so the pattern of the background are emphasize.