Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • March 14, 2019 at 11:13 pm #1078924
    sugadaddy

    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.
    March 15, 2019 at 2:32 pm #1079146
    Nikko

    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

    March 15, 2019 at 10:27 pm #1079283
    sugadaddy

    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

    March 16, 2019 at 4:38 am #1079328
    Nikko

    Hi Steffen,

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

    Best regards,
    Nikko

    March 16, 2019 at 9:23 am #1079399
    sugadaddy

    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.
    March 18, 2019 at 10:52 am #1079805
    Nikko

    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

    March 18, 2019 at 11:23 pm #1080136
    sugadaddy

    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.

    March 18, 2019 at 11:35 pm #1080138
    sugadaddy

    here’s a current screenshot

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

    March 20, 2019 at 6:23 pm #1080939
    Nikko

    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

    March 27, 2019 at 11:41 pm #1083833
    sugadaddy

    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?

    March 28, 2019 at 1:46 am #1083858
    Nikko

    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

    April 1, 2019 at 10:54 pm #1085729
    sugadaddy

    thanks, that did it!

    April 2, 2019 at 1:19 am #1085770
    Nikko

    Hi sugadaddy,

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

    Best regards,
    Nikko

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