How can I add a background to a rich text section on my website?

Store Design
,
1

Hi there,

I want to add a background to a rich text section on my website https://taneraskin.com/

Particularly the “Was ist KP?” section. Can somebody tell me what css code to add?

Best,

Isa

2

Hi @isabellemaria ,

I understand that you want to add background (“Was ist KP?” section). But I dont have any idea what kind of background you want to add. I add the background-color as an example. You can also change the color you like.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “theme.scss.liquid” or “styles.scss.liquid” file, depending on which file your theme uses to store its CSS styles.
  4. At the bottom of the file, add the following CSS code:
.rich-text.content-container.color-background-2.gradient.rich-text--full-width.content-container--full-width.section-template--17904032514316__811dcafe-2424-4f44-b0d7-eed3a00159d4-padding {
    background-color: violet;
}

Result:

Rose_Dim_0-1682893331010.png
Rose_Dim_0-1682893331010.png980×479 11 KB

I hope it help.

3

I don’t want to change the background color, I want to have an image as the background. Is it possible to upload the image into the “library” of my shopify store and then put a link in the css code so it takes this image?

4

Oh, Its just an example. Try this one. thne. Same instruction.

.rich-text.content-container.color-background-2.gradient.rich-text--full-width.content-container--full-width.section-template--17904032514316__811dcafe-2424-4f44-b0d7-eed3a00159d4-padding {
    background-image: url('your-background-image.png'); /* Replace with the path to your PNG image */
    background-size: cover;
    background-position: center;
}

And Save.