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:

http://url.com/www.elizabethmckenzieflorals.com
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

screen-shot-2019-07-03-at-120358-pm.png.10dc69a69a1b1322f3e0b498699253c6.png

Edited by bpurnell
Initial Revision
Link to comment
  • 11 months later...
  • Replies 3
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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;
}

image.thumb.png.1c4604a2a3c467b2a92c7f2bdeeac6cd.png

 

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, 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

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.