Slightly transparent text background on slideshow

Store Design
1

Hello,

The slideshow on our homepage, the text can be difficult to read with our images. Is there anyway to add a semi-transparent background behind text, so it’s more readable? I’ve created a slide with live text for an example. (5th slide).
https://www.naturesgoodguys.com/

Thanks.

2

Hi @ArtDepartTipTop

Please follow these steps:

  • Find the file style.css or style.css.liquid and find the code:
@media (min-width: 768px) {

.slideshow--navigation-arrows .overlay-text {}

}
  • Add the following code to the curly brackets of .slideshow–navigation-arrows .overlay-text {}
left: 0px;
  right: 0px;
  width: auto;
  • Before:
.slideshow--navigation-arrows .overlay-text {
  left: 40px;
  right: 40px;
  width: auto;
}
  • After:
.slideshow--navigation-arrows .overlay-text {
  left: 0px;
  right: 0px;
  width: auto;
  background-color: rgba(0, 0, 0, 0.3);
}

I hope that it will work for you.