[Resolved] Gradient over section

[Melody]

Hey Tom,

I want to add a semi-transparent gradient (probably around 50% opacity black to transparent) over a section on my site. I have a background image that is somewhat detailed and a few paragraphs of text that sit on top; thus keen for a gradient over the image to help with text readability. I could add a gradient to the background image itself before uploading it, but I am hoping to use the parallax effect on the image (but not the gradient).

Is this possible, maybe through some custom css?

Thanks for your thoughts,
Melody

[Tom]

Hi Melody,

You could try this:

Add an empty HTML element to the section:

<div class="gradient"><!-- empty element --></div>

Then some CSS like this:

.gradient {
    background-image: url(URL TO YOUR GRADIENT IMAGE);
    background-repeat: repeat;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

Let me know if that helps or not 🙂

[Author]

Posts