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
On 5/19/2022 at 4:33 AM, Leah_Chandler said:

As well, where would I apply this code to have it show up on my site?

Add to Home > Design > Custom CSS

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.