Is there a way to add a color box behind text?

[abailea077]

Hello guys,

I was seeing some shopify websites and I saw some of them putting some color boxes behind the text like here:

https://stuffed-cookies.com/

(the pink square box)

I have put some white text on my hero video buy I can not see it very well, so I was wandering how do we add a color text box behind the text or something that it will help to bring out more the text.

here is my URL with a password because the website is not active right now

https://toroeatstreats.com/password

Password: brayden

Thank you for your time!

[Made4uo-Ribe · Accepted solution]

Hi @abailea077 

Do you mean like this? 

If it is check this code, I would add for mobile and dekstop.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

#shopify-section-template--23030828237101__video_hero_CUXq8G h2 {
    background: aqua;
    padding: 5px;
    border-radius: 10px;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[abailea077]

This is wonderfull! You are so quick to answer! Thank you so much!

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

<style>
  .video-hero__text-container.section-blocks.animation--section-blocks {
    background: grey;
    padding: 10px;
  }
</style>

Result:

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