How can I add a gradient background box to my rich text?

Store Design

Topic summary

A user seeks to add a gradient background box to rich text and its heading so content remains visible over a background image. A transparent gradient effect is preferred.

Solutions Provided:

Two community members offered CSS code solutions:

  • Option 1: Adds a pseudo-element (::before) to create an overlay on the body.index element with adjustable opacity via rgba(0, 0, 0, 0.6)
  • Option 2: Targets the specific .rich-text__blocks.center class with rgba(0, 0, 0, 0.4) !important

Both solutions allow brightness adjustment by modifying the last parameter in the rgba value.

Implementation:

Code should be added to theme.css/base.css/index.css file or within <head></head> tags in theme.liquid. Detailed steps provided for locating the CSS file through Shopify admin.

Resolution:

The user confirmed Option 1 works well, marking the issue as resolved.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
1

Hey
I’m looking to put some kind of a background box to my rich text and its heading so that it can be seen with the picture in the background. If this box could be a transparent gradient that would be great.
Thanks you in Advance

Screen Shot 2023-11-22 at 4.07.54 pm.png
Screen Shot 2023-11-22 at 4.07.54 pm.png2148×1424 596 KB

2

Hi @tsnell64

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for you.

Best Regards

Sahil

3

Hi,
Please send the store link containing the above section and I will code it for you. Thank you!

1 Like
4

Thanks a lot Lee the link to that page is https://endeavouraerospace.com.au/

5

Hi,
Below is the code I’ve created for you. You can adjust the brightness by modifying the last parameter in the following code: background: rgba(0, 0, 0, 0.6).

Please attach it in the CSS file or within the tags in the theme.liquid file.

CSS file:

body.index {
    position: relative;
}
body.index:before {
    content: '';
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Theme.liquid file:

Have a great day!
https://prnt.sc/E9_9-GwkIx-r

6

Hi @tsnell64 Thanks for providing the Url. You need to add the Please add this code in theme.css/base.css/index.css whichever is available in your theme.

.rich-text__blocks.center {
    background: rgba(0, 0, 0, 0.4) !important;
}

If you are not sure where is your theme.css/base.css/index.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css in the code in left hand side.
  6. Add the code at the bottom of the theme.css/base.css/index.css which ever is available in your theme.

Please Note you can change rgba according to your needs.

Result:

sahilsharma9515_1-1700644778614.png
sahilsharma9515_1-1700644778614.png1393×883 248 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

2 Likes
7

This works well thanks a lot Lee