Custom CSS for a box around text over an image...

Site URL: http://kpstyleconsultant.com

Hello!
So this is my first website & I'm elbow deep in Custom CSS & individual page coding, trying to figure out how to add a solid colored box with text inside over an image.  That's a mouthful in itself it is my very first intro image on the first section of the website.  I found a youtube tutorial that was very helpful but every time I try I save the Custom CSS & go to another page the solid box disappears.  I also saw the Squarespace forum attached.   I realize frustration is because the ID # I'm using is constantly changing.  But I can't find a section ID or a block ID & like I said this one appears to work but then the ID # is ever changing.  HELP!

YouTube:  https://www.youtube.com/watch?v=bQI-Wk-iqw4&t=61s

Squarespace:  https://forum.squarespace.com/topic/90873-how-to-find-block-id-for-specific-css-changes/

Current code:

Again I know this yui...  is constantly changing & I need a different ID but I don't see another option that has worked. 

I'd really appreciate any help with this!  Not sure what I'm doing wrong, I've tried lots of combos & am grateful for any assistance!  Thanks in advance!!!!  This is what it's suppose to look like with the box around it so the text stand out against the background, but the box keeps disappearing like the 1st photo.  I realize it's something between 7.0 & 7.1.  But don't know how to do complete the new code for the box to permanently stay put.  I'd really appreciate any help with this!  Thanks in advance!!!!

The url doesn't exist. Can you check again?

Sorry the website was not entered correctly it's fixed now! 🙈

Add to Home > design > Custom CSS

/* Box around text */
div#block-205d91c6a2e7808e03aa {
    background: #e1ded7;
}

@tuanphan how can I make the box less opaque and more transparent with this code, while making sure the text still pops?   
I tried this, but it pulls the opacity of the text down as well as the box around it. 

/* Box around text */
div #block-e9cb58fae90f561e0a23 > div {
    background: #77CEFA; opacity:.76;
}

Site is:  https://clover-tetra-tnwa.squarespace.com/

PW: RES

Thanks!

Thank you for your help!  You make it seem so easy, 3 days of racking my brain & ALL the google searched!😜

@jenartsquare this is how I did it:

/* Box around text */ div#block-205d91c6a2e7808e03aa  {
    background: rgba(231, 226, 218, .75) }

The "a" means opacity & the .75 is the amount of 0-100, you can play with the # to see how translucent you want the box.

rgba(231, 226, 218, .75)    is the specific color I used, I took my color from the design > color portion & then googled hsl to rga to get the translated color

Hope this helps?!

1 hour ago, Kjersti1015 said:

@jenartsquare this is how I did it:

/* Box around text */ div#block-205d91c6a2e7808e03aa  {
    background: rgba(231, 226, 218, .75) }

 

The "a" means opacity & the .75 is the amount of 0-100, you can play with the # to see how translucent you want the box.

rgba(231, 226, 218, .75)    is the specific color I used, I took my color from the design > color portion & then googled hsl to rga to get the translated color

Hope this helps?!

You can also use this tool to convert color to rgb.