How to add an opaque color background to a text block while keeping the text solid.

Site URL: https://fluid-body.squarespace.com/

Hi there,

I'm trying to add an opaque lavender background to the text block in the hero banner but I can't figure out how to do it without it affecting the text.

I want the text to remain solid but the background to be opaque.

Password to this site: Holualoa

Thank you!

Your current rule-set is applying opacity to the entire block, the background color as well as the text. You want to target just the background color using rgba.

Change your rule-set to the following.

#block-243d679265d1e24a0445 {

  background-color : rgba( 158, 129, 226, 0.7 );
  padding : 20px;
  
  }

There are converters online if you need to go from hex to rgb.

Let us know how it goes.

Works perfectly, thank you!