Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #1078924

    Hi,

    i’d like to create a full-width image overlay with transparency over another section’s parallax background (see the layout picture here: https://pasteboard.co/I5r0w4p.jpg <—right-click/new tab to open). I’ve marked the section on my site in red borders.

    Thanks and regards,
    Steffen

    • This topic was modified 1 week, 1 day ago by  sugadaddy.
    #1079146

    Hey sugadaddy,

    Please remove the red borders, then in Quick CSS (located in Enfold > General Styling), add this css code:

    .home #av_section_2 {
        position: relative;
        z-index: 10;
        margin-bottom: -60px;
        background-color: transparent;
    }
    
    .home #av_section_4 {
        margin-top: -100px;
        position: relative;
        z-index: 10;
        background-color: transparent;
    }

    Best regards,
    Nikko

    #1079283

    Thanks Nikko. It works, sort of. The images are still cut off, though.

    Adding a padding-bottom, will reveal a white hole between the sections. Any way to display these images in full-width and (inherent) full height?

    Regards,
    Steffen

    #1079328

    Hi Steffen,

    Just adjust the margin-top and margin-bottom in the code and that should help fix it.

    Best regards,
    Nikko

    #1079399

    Hi Nikko,

    adding/reducing margin does not reveal more of the image. They still appear cropped.
    The images also do not scale to full width.

    Thanks and regards,
    Steffen

    • This reply was modified 6 days, 14 hours ago by  sugadaddy.
    #1079805

    Hi Steffen,

    I have modified the height of those Color Sections to Custom Pixel, then in Quick CSS, I have added this code:

    .home #av_section_2 {
        z-index: 10;
        position: relative;
        max-width: 100% !important;
        padding: 0;
        margin-bottom: -80px;
        background-color: transparent;
    }
    
    .home #av_section_4 {
        margin-bottom: -30px;
        margin-top: -100px;
        position: relative;
        z-index: 10;
        background-color: transparent;
    }

    Best regards,
    Nikko

    #1080136

    Thanks Nikko, but it’s not working. As i’ve posted on another thread, both the Quick CSS and style.css are not working on my end. Not sure how you got it to work. When i enter it in the Custom CSS-plugin i’m using your code is not working.

    #1080138

    here’s a current screenshot

    https://pasteboard.co/I62SWLS.png
    (also note that it’s not stretching to fullscreen size):

    #1080939

    Hi sugadaddy,

    The one at the bottom I just set the height to 125px so it doesn’t look cut off.
    However for the one on top can you use a wider image, probably around 2000px? maybe I can adjust the code after that, since the current image won’t work properly on larger screens.

    Best regards,
    Nikko

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.