I have a banner image with description text & button on top of it. I'd like to add background to the description text to make it more readable.

I've been using this CSS below, but to no avail. Please advise - thanks!

@scottmcelroy can you share site url?if your site is in trial, you can setup password and share url. See how to: https://beaverhero.com/squarespace-how-to/#HowtoSetupPasswordShareSiteURL

Here's site link: https://jennamcelroyphoto.squarespace.com/config/settings/site-visibilitypw: community

Thanks for your help, Tuanphan.

On the Education index page, you should see the white text "Come to grow. Come to connect. Come to create." That's the text that I'd like to add background to in order to make it more visible against the current background.

@scottmcelroy I don't see "Come to grow...."

@tuanphan Forgive me, it's 'Not linked' as the Education index page, beneath the Home index. Site is now public, are you able to see the Not Linked section?

Thanks for your time, Tuanphan.

@scottmcelroy Nice site ;)

Can you take screenshot?

screenshot link 1: https://www.dropbox.com/s/gtbf9ywwicp2gpo/JMP%20screenshot%201.jpg?dl=0

screenshot link 2: https://www.dropbox.com/s/6fxm8qa1ikhc3l8/JMP%20screeshot%202.jpg?dl=0

Let me know if these work, @tuanphan. Thank you!

@scottmcelroy Can you publish that section? I don't see...

@tuanphan - It's now published under 'Education' in top navigation.

@scottmcelroy Add to Home > Design > Custom CSS

/* Come to Grow */
.desc-wrapper p:first-child {
   background: #000;
}
/* Come to connect... */
.desc-wrapper p:nth-child(10n+2) {
   background: #000;
}
/* Remove spacing between comet to grow and connect */
.desc-wrapper p:first-child {
   margin-bottom: 0 !important;
}
.desc-wrapper p:nth-child(10n+2) {
   margin-top: 0 !important;
}

Thanks, @tuanphan. Clearly making progress, thank you!

If you check now though, you can see that the .desc-wrapper extends beyond the copy (it should be just behind the text obviously) and I'd love to be able to adjust the opacity as well.

Please advise - thank you!

@scottmcelroy You can usebackground: rgba(227,224,215,0.5);0.5 is opacity (0 --> 1)

e3e0d7 = rgb(227,224,215)

.desc-wrapper p:nth-child(10n+2), .desc-wrapper p:first-child {
   display: inline-block;
}
/* Remove spacing between p1 and p2 */
.desc-wrapper p:nth-child(10n+2) {
   margin-top: -1px !important;
}

-5px will be better :D

@tuanphan Where do I add the opacity? / Where do I need to remove spacing from? In the settings --> description part of the page?

@scottmcelroy All code

/* Come to Grow */
.desc-wrapper p:first-child {
    background: rgba(227,224,215,0.5);
   display: inline-block;
}
/* Come to connect... */
.desc-wrapper p:nth-child(10n+2) {
     background: rgba(227,224,215,0.5);
    display: inline-block;
}
/* Remove spacing between comet to grow and connect */
.desc-wrapper p:first-child {
    margin-bottom: 0 !important;
}
.desc-wrapper p:nth-child(10n+2) {
    margin-top: -5px !important;
}

You're too kind, @tuanphan. Thank you so much.

Absolute LAST THING, what do I need to add under each .desc-wrapper to customize sizing of each text? (i.e. - make the top line of copy slightly bigger than the bottom?

@scottmcelroy

.desc-wrapper p:first-child strong {
       font-size: 66px;
      color: red;
   }
.desc-wrapper p:nth-child(10n+2) strong {
       font-size: 30px;
      color: black;
   }

@tuanphan Thank you again for all of your help here!

I do have another question, though: what CSS do I need to add to left-align the copy? Please advise - thank you!

@scottmcelroy Hi, morning

You can use: text-align: left;

If it doesn't work, try text-align: left !important;