Background Image on Section in Craft Theme

Store Design
1

Hey there,

I am having a hard time getting my background image to show behind the rich text section in my Craft theme homepage. It is the second section starting with “Designing thoughtful, meaningful spaces…” - https://season-house-website.myshopify.com/ Password: brandwell

I’ve tried pointing the bg URL in the coding to the section but nothing seems to work. Any suggestions?

1 Like
2

@alishaserre

Hi,

You can add a background image under the rich text section with the code below.

Before adding the code below, you have to upload your background image to Settings > Files.

After uploading the file, please add the code below to the assets/section-rich-text.css file (with your image link).

@media screen and (min-width: 750px) {
  .section-template--14817885585451__rich_text-padding {
    background: url(https://cdn.shopify.com/your-file-link);
  }
}

If you want to add the background image on both, PC & Mobile, please use the code below.

.section-template--14817885585451__rich_text-padding {
  background: url(https://cdn.shopify.com/your-file-link);
}

Hope it helps.

If you resolve the issues, please click “Like” and “Accept solution”.

If you have any other questions, please let me know.

Thanks.

3

@alishaserre

can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/section-rich-text.css ->paste below code at the bottom of the file.
.section-template--14817885585451__rich_text-padding {
background-image: url(https://cdn.shopify.com/s/files/1/0579/3097/3227/files/fall_2022_G.jpg);
    background-size: cover;
    background-position: center;
}
.rich-text__wrapper, .rich-text__heading {
    color: #fff;
}
4

Hey! That worked great, thanks for your help. - is there a way I can get it to be static? Right now, it scrolls like a Parallax background in that section when I scroll down the page.