Jump to content

Code to add overlay to image

By FezkoDesigns, in Code Blocks

Go to solution Solved by Lesum,

Recommended Posts

FezkoDesigns Level 4

FezkoDesigns

Posted
Posted

Hello!

Does anyone have code that I can use to add a dark overlay to this background image? The contrast between the background image and text will not pass WCAG standards as is. Thank you! 

P.S. - This section has a block of code currently as the image and left column text are sticky and the right column is scrolling. I can provide that additionally if needed. 

Screen Shot 2024-06-23 at 9.54.31 AM.png

Link to comment
  • Replies 5
  • Views 194
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Lesum
Lesum

Add this code to create a background overlay on a section when the section background image has been set using custom CSS. section[data-section-id="66401df29cb8660c4f9af59c"] .section-background:be

Posted Images

Lesum Level 8

Lesum

Posted
Posted (edited)

@FezkoDesigns Hi! You don't need code to display a dark overlay on background images. Simply navigate to Edit > Edit Section > Background > Overlay Opacity. Also, ensure that the option under Colors, section is set to the Dark colored option.

Edited by Lesum

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer
☕ Did you find my contribution helpful? Buy me a coffee?

Link to comment
  • Solution
Lesum Level 8

Lesum

Posted
  • Solution
Posted

Add this code to create a background overlay on a section when the section background image has been set using custom CSS. 

section[data-section-id="66401df29cb8660c4f9af59c"] .section-background:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5) !important;
    pointer-events: none;
    z-index: 1;
}

 

If my comments were useful, please like or mark my solution as answer so others can scroll to it quickly. 

Sam
Web Developer & Digital Designer
☕ Did you find my contribution helpful? Buy me a coffee?

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing
×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources