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
    Posts
  • #155570
    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

    #155596
    Tom
    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.