Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • March 23, 2019 at 7:18 am #1082081
    JoeSurf

    Hi,

    Is it possible to create a full-width background overlay for just one column?

    For example, in the site link provided the top color section has a black background overlay over the entire background image. I am trying to create it so only half the color section (on the left side) has this black tint so it acts as a background for some text and button. The other half on the right side shows the color section background image in its normal, untinted state.

    I’ve provided a second link to an image as an example of what I am hoping to achieve.

    Thank you for your help!

    March 27, 2019 at 12:59 am #1083322
    Basilis

    Hey JoeSurf,

    Unfortunately, it would require quite some time and customization of the theme to achieve this, so I am sorry to tell you that this is not covered by our support. However, if it’s really important for you to get this done, you can always hire a freelancer to do the job for you :)

    Best regards,
    Basilis

    March 27, 2019 at 12:00 pm #1083524
    JoeSurf

    Thanks Basilis for the reply. That’s fair enough. Appreciate you’re looking into this. I was just curious if there was a quick shortcut to implementing it in Enfold.

    For anyone interested, I ended up creating a similar effect using the following CSS: 

    #banner::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: .7;
}

#banner {
position: relative;
}

    Just be sure to add “banner” to the Color Sections ID. You can that other columned elements like text to fit within the overlay.

    To see what you’ll end up with, and find some other really cool gradient overlay effects you can use on images, here’s where the original code came from: https://bryanlrobinson.com/blog/2018/04/30/how-to-css-after-elements-for-background-overlays/

    March 31, 2019 at 4:56 am #1084990
    Rikard

    Hi,

    Great, I’m glad you found a solution and thanks for sharing :-)

    Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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