Archived topic

Gradient over section

1 reply · Started by Melody on November 24, 2015

Viewing posts 1–2 of 2

November 24, 2015 at 8:07 pm #155570

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

November 24, 2015 at 11:07 pm #155596

Hi Melody,

You could try this:

Add an empty HTML element to the section:

<div class="gradient"></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 :)

This archived topic is closed to new replies.

Start building better websites today.