Code to add overlay to image

FezkoDesigns · June 23

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.

Lesum · June 23

@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 June 23 by Lesum

FezkoDesigns · June 24

Hi @Lesum the background image was added through code so an overlay can't be added that way.

Lesum · June 24

@FezkoDesigns Can you share your site URL?

Lesum · June 25

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

FezkoDesigns · June 25

Perfect - thank you!!!

Code to add overlay to image

Recommended Posts

FezkoDesigns

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

Lesum

Posted Images

Lesum

FezkoDesigns

Lesum

Lesum

FezkoDesigns

Create an account or sign in to comment

Lesum

Circle Benefits

Events

Circle Day

Resources

Product Updates

Squarespace Webinars

Hire a Designer

Support

Community

Developers

Resources