Banner overlay customization

Site URL: https://blissfuldoulacare.ca/

Password to website is: blissful2021

I am trying to achieve this look on the homepage of this site.

I tried uploading the image with the overlay (as one background image), but the text doesn't remain on top of the purple overlay.

Any suggestions are greatly appreciated!

Hi,

You can add text + button block. Then we will give the code to add image as text/button container background.

Hello @tuanphan

Got it. I added in the text + button block.

Thank you!

Hi @tuanphan

I've tried a few things and this is the closest I've come to the desired look as shown in my first post.

Main issues I'm having:

-Not targeting the right container/can't find appropriate selector

-As shown in attached image - I am having issues positioning the purple overlay image correctly (when I make adjustments it targets all content in the column.). 

Site: 

Site URL: https://blissfuldoulacare.ca/

Password to website is: blissful2021

How do I target just the purpler overlay image to position behind the other text blocks (there is h3 text block + markdown + h1 text block + button)?

Cheers!

#welcome-1 .sqs-col-12 {
    width: 100% !important;
}

#welcome-1 .sqs-col-12 {
    background-image: url("https://static1.squarespace.com/static/60b13fa966b81645ad1e967a/t/613a94dc9128cd56568eddd1/1631229148624/purple-overlay.png");
    background-repeat: no-repeat;
    background-position: cover;
    width: 100%;
    height: 100%;
}