Jump to content

Creating a semi opaque box to house text in the top banner/ heading photo

Recommended Posts

Site URL: https://www.leahchandler.ca

Hello! I am looking for guidance in creating a semi-opaque box to house my heading text. Is this possible to do?  The image and font colour don't mesh well so if I had a text box, it would help the font be more legible. 

I'm attaching a screenshot from my duplicate website that I'm working on so that if I make a mistake here, it's not messing up my main site.

Thanks in advance to anyone who might be able to help!


Screen Shot 2022-05-17 at 7.14.25 PM.png

Link to comment
12 hours ago, houghtoncreative said:

hi @Leah_Chandler Do you mean something like this?

This code will work on your live site. I'd need the link to your testing site to create code for that.


#block-yui_3_17_2_13_1457552603071_12467 {
    background: rgba(255, 255, 255, 0.6);
    max-width: 80%;


Screen Shot 2022-05-18 at 9.10.57 PM.png

Hi @houghtoncreative YES that's exactly what I'm looking for! Wow, thank you so much.

The testing site isn't live, would I need to give you viewing permission in order for you to see it? Sorry, I'm not super familiar with how this works. 

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.