Jump to content

Overlap a text block with a colored background over an image block in Brine template

Recommended Posts

I am working on a client website below:

password: flowers
Page needing to address: Meet Saige

I am wanting to overlap a text block with a colored background over a full-width image block as shown below in the screenshot. Not sure if it's easier to add them as separate blocks (image and text), or to create a Collage Image block and customize that using CSS.

Help is very much appreciated!

alt text


Link to comment
  • 11 months later...
  • Replies 3
  • Views 1.9k
  • Created
  • Last Reply

Hi BrookeP,

Is this what you asked,

if so, please inject this custom css

#meet-saige-bottom H1 {
    background: #fbead7;
    text-align: center;
    white-space: pre-wrap;
    color: #000;
    text-transform: none;



BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!


Link to comment

@bangank36 close but not quite because I think she wants it to overlap on the previous section. 

@BrookeP There's a couple things you could do, you create a section that just has a background-image and spacers to give a blank section, then add another section with your text content. Then you'd be able to use some custom CSS to pull the text up into the previous section to give you that overlap effect

Philadelphia, PA

👉 Squarespace Tutorials 

Chat/Message on FB Messenger for quickest responsehttps://m.me/dejaegherryan


Link to comment
  • 3 months later...

@RyanDejaegher  I just saw this. I am trying to overlap text over a custom slider.  The slider had text, which I will removed... because...my boss would like the text to remain static while the images slide beneath it. i thought I could do this like you mentioned - make a text block and use CSS to move it up, but it doesn't seem to want to move. Am I positioning it using "absolute" and percentage from top? Or is it not possible to move it. 

Link to comment


This topic is now archived and is closed to further replies.

  • 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.