How can I add a background color to the text in my slideshow header?

Store Design
21

Yeps and in mobile too.. Do like to change the color of the font, inside that box?

22

Sure! that’d be cool to add that effect too.

23

Just add the color inside the code.

Ribe_Dagandara_0-1687457033098.png
Ribe_Dagandara_0-1687457033098.png247×102 2.09 KB

.hero__text-shadow {
    background: #EEEDE0;
    padding: 20px;
    color: burlywood;
}

Result:

Ribe_Dagandara_1-1687457082779.png
Ribe_Dagandara_1-1687457082779.png1109×393 286 KB

I hope it help.

24

Is there any way I can change the opacity level on the box color behind the text?

25

Yup, add the opacity.

.hero__text-shadow {
    background: #EEEDE0;
    padding: 20px;
    opacity: .5;
}

The Opacity is value between 0 and 1, where 0 represents completely transparent and 1 represents fully opaque.

Result:

Ribe_Dagandara_0-1687457383719.png
Ribe_Dagandara_0-1687457383719.png1020×285 263 KB

26

But I noticed the opacity also makes the text and buttons opaque too. Can it just make the back color opaque?

27

It will affect the text so it should be put on the .5 so both are same opacity the text and background.

28

ok thank you for all the help! I’m super happy with the outcome.

29

Your welcome, please dont forget to like and mark solution if my solution solve your problem.

Happy to help here. :blush: