Row image background in lighbox

[minutes]

Hi there,

At the top of the page I have a full-screen image (set as row image background), and the rest of the images are standard. Currently the row image background is not part of the lightbox – is it possible to make it part of it?

Thank you for any insight!

[arminunruh]

hello!

no, row background images are not part of the lightbox.
I think there is no way to do that.

Instead of using a row background image, you could insert the image normally using the +Image button. Then it would be part of the lightbox.

[minutes]

@arminunruh Hey Armin, thank you for your response.

Please could you see the below page (p: test1):
https://mantaspeteraitis.com/currents

I'd love for the image at the top to be full-screen and setting it as row image background was the only way I could figure out how to achieve this result for both desktop and mobile (although on mobile and certain browser sizes I can see some unwanted padding at the top).

Do you have any tips how to achieve this otherwise (also without padding at the top on certain sizes) so that it could be part of the lightbox?

[arminunruh]

sure

in gridder:
remove the row background image

insert the image using +image

resize the image to the very left border and right border in the gridder:
https://laytheme.com/documentation/gridder-elements.html#full-width-element

then right click the image, click "set html class and id"
as class enter: fullscreen

in lay options → custom css & html, in custom css enter:

.fullscreen .ph{
    padding-bottom: none;
    height: 100vh;
    height: 100svh;
}

.fullscreen img{
    object-fit: cover;
    height: 100vh;
    height: 100svh;
}

[minutes]

@arminunruh Thank you Armin, this now works in terms of image being fullscreen and it's included in the lightbox. However, once the page is scrolled, there is a browser-height worth of blank space (see screenshot attached). I tried it on a couple of pages and the result is the same – any idea why this is happening? Thanks again!

[arminunruh]

@arminunruh said in Row image background in lighbox:

fullscreen

use this css instead:

.fullscreen .ph{
    padding-bottom: 0!important;
    height: 100vh;
    height: 100svh;
}

.fullscreen img{
    object-fit: cover;
    height: 100vh;
    height: 100svh;
}

[minutes]

@arminunruh Thank you Armin!