Background color behind text in slider

Is it possible to have a background color with transparency (expressed in RGB) behind the slider text. This would make it much easier to read with variant background pictures that have different levels of brightness.

I am working on WWEL.org

The white text works great on the darker two slides, but the first slide is much brighter so the text is hard to read. But a background color with a transparency factor would solve this issue right now.

Thank you very much.

Hello there,

Please try adding this simple CSS code to Appearance > Customize > Additional CSS from dashboard.

    .header-slider .text-slider {
      background-color: rgba(0,0,0,0.4);
    }

Regards,
Kharis

Thank you, Kharis. I really appreciate all this help. I will be using
these modifications on every site I build with Sydney Pro.

I inserted the code and it does work. However, their are no values to
control the dimensions of the background color. And the background
color is full width. The bottom margin below text is much larger than
the top margin below text, so basically it seems incomplete.

How can I control the background color size? So just the text has the
background color and without excessive areas of the pics being covered
too.

It would also be advantageous to control the radius of curved corners in
the background color. If possible.

Thanks again. I would never be able to figure this out on my own. I
don’t know how you guys do it.

Dan

Hello Dan,

If got your goal correctly, you’d need to remove the code I suggested before and use this one instead.

    .text-slider h2.maintitle {
      background-color: rgba(255,255,255,0.3);
      padding-left: 20px;
      padding-right: 20px;
      border-radius: 10px;
      line-height: 1;
    }

    .text-slider p.subtitle {
      display: table;
      padding-bottom: 10px;
      padding-top: 10px;
      padding-left: 20px;
      padding-right: 20px;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
      background-color: rgba(255,255,255,0.3);  
      border-radius: 10px;
    }

Regards,
Kharis

Thank you once again, Kharis! This helps tremendously! Gives absolute
control of the background color, etc. Exactly what I was hoping for.
Mission accomplished!

Humbly,
Dan

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis