Tagged: ,

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • April 6, 2025 at 9:56 am #1480866
    Orenishii

    Hello,

    I would like to use a color section to my page headers, but I don’t want it to cover the entire image. Instead, I’d like a slanted overlay the covers approximately 45% of the total background. I found the documentation to create the gradient in the help files, but couldn’t see anything similar to what I’m trying to accomplish. Could you please advise on how to achieve it? Thank you very much.

    April 6, 2025 at 5:24 pm #1480879
    Mike

    Hey Orenishii,
    On your example page this is not done with gradient overlay, but with a image, see the link below:
    Screen Shot 2025 04 06 at 11.23.12 AM

    Best regards,
    Mike

    April 6, 2025 at 7:37 pm #1480887
    Orenishii

    Ahhhhh, I didn’t realize that. Thanks for the insight, Mike. I can make an image in a snap! Is there a way that I can set the image to cover only a portion of the background? I feel like there’s something about positioning in CSS, but I’m not well-versed in it.

    Appreciate your help!

    April 6, 2025 at 10:48 pm #1480891
    Mike

    Hi,
    This is the css that it is using:

    @media screen and (min-width: 768px) {
    .hero:not(.bg-purple-25-gradient) {
        background-image: url(/themes/custom/lp/assets/icons/polygon-midultraviolet.svg);
        background-position: calc(50% - 280px) calc(50% + 50px);
        background-repeat: no-repeat;
        background-size: cover;
    }
}
@media screen and (min-width: 1600px) {
    .hero:not(.bg-purple-25-gradient) {
        background-position: calc(50% - 600px) calc(50% + 50px);
    }
}

    Best regards,
    Mike

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