Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

[Resolved] Gradient over section

Home Forums Support Gradient over section

  • This topic has 1 reply, 2 voices, and was last updated 5 years ago by Tom.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #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,

    Lead Developer
    Lead Developer

    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 🙂

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.