Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #497545

    Hey and thanks for great support

    I am trying to achieve getting the same ‘background overlay’ effect that is possible on color sections. I want to put it on a masonry grid, but the overlay effect behaves differently for some reason.

    This is the effect I want to copy:

    This is the grid I want to place the effect on:

    This is the code:

    opacity: 0.3;
        background-color: #515151;
        background-image: url(;
        background-repeat: repeat;

    For some reason it becomes much lighter instead of darker like on the ‘films’ page. I tried placing the code on the .av-fixed-size .av-masonry-image-container, .av-fixed-size .av-masonry-outerimage-container and all other relevant divs, but can’t tell why it doesn’t give the right effect.

    I am not sure this is too specific or your support, but crossing my fingers :)


    • This topic was modified 4 years, 9 months ago by  Emilvillumsen.

    Hey Emilvillumsen!

    Thank you for using Enfold.

    I can’t seem to access the site including the background image for some reason. Is there any security block or something? Anyway, try to use this in the Quick CSS field:

    .av-masonry-entry:before {
        content: '';
        display: block;
        min-height: 500px;
        width: 100%;
        z-index: 1000;
        position: absolute;
        opacity: 0.3;
        background-color: #515151;
        background-image: url(;
        background-repeat: repeat;



    Cheers that worked :)

    I changed min-height to 100% to make it responsive and changed z-index to 2 to stay below the text, for anyone interested.



    Another problem arose then:

    I have the masonry grid on ‘no gap’ but still there are vertical pixel gaps between entries. They are larger in the top and then get narrowed down, which looks very sloppy and isn’t meant to be there, even more with the ‘no gap’ setting. I can’t find the cause of is.

    How do I solve this behaviour?



    What happens when you add more masonry items? I have a monitor with 1920x1080px resolution but the issue is barely visible. Let’s hope that adding more items correct the alignment.

    Best regards,


    Sadly, it didn’t. The alignment is still off and on a retina screen the white pixel line is very visible. Any ideas?



    I don’t have retina to check, so can’t see the issue, but since when did this issue happen? Remove any custom CSS code to check which one is causing it. Try to deactivate all plugins while testing.
    Can you show us screenshots of the issue? you can use or dropbox.


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

You must be logged in to reply to this topic.