Viewing 13 posts - 1 through 13 (of 13 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 5 years, 10 months 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 5 years, 10 months 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

    #1083833

    thanks Nikko! I’m sorry, but your way did not work, but i figured out another way how to stretch the image and display all of it. Section “#av_section_3” now slides underneath the arrow image the way i intended it, but i can’t seem to get the z-index of the bottom image element (“#news-arrow”) to lay on top of “#av_section_3”. Even if i type in something like “z-index: 999999 !important;” it keeps reverting to “z-index: auto;”. Do you have a tip for that?

    #1083858

    Hi sugadaddy,

    Try setting it’s position to relative.
    z-index will not work when position is set to static, it only works when it’s relative or absolute.

    Best regards,
    Nikko

    #1085729

    thanks, that did it!

    #1085770

    Hi sugadaddy,

    We’re glad that we could help :)
    Thanks for using Enfold and have a great day!

    Best regards,
    Nikko

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘Transparent PNG overlay’ is closed to new replies.