Tagged: ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • September 3, 2015 at 10:10 am #497545
    Emilvillumsen

    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: http://laserhoofs.ninja/index.php/films/

    This is the grid I want to place the effect on: http://laserhoofs.ninja/index.php/upcoming-content/

    This is the code:

    opacity: 0.3;
    background-color: #515151;
    background-image: url(https://laserhoofs.ninja/wp-content/themes/enfold/images/background-images/wool-diagonal-for-dark-background.png);
    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 :)

    Cheers

    • This topic was modified 9 years, 2 months ago by Emilvillumsen.
    September 4, 2015 at 9:04 am #498142
    Ismael

    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(https://laserhoofs.ninja/wp-content/themes/enfold/images/background-images/wool-diagonal-for-dark-background.png);
    background-repeat: repeat;
}

    Regards,
    Ismael

    September 4, 2015 at 11:05 am #498222
    Emilvillumsen

    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.

    Thanks!

    September 4, 2015 at 12:05 pm #498272
    Emilvillumsen

    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?

    September 6, 2015 at 2:14 am #498770
    Ismael

    Hey!

    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,
    Ismael

    September 9, 2015 at 2:32 pm #500447
    Emilvillumsen

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

    September 11, 2015 at 12:14 pm #501572
    Andy

    Hey!

    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 imgur.com or dropbox.

    Cheers!
    Andy

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