Adding a background image to the lightbox function of a gallery slideshow

Site URL: https://burgundy-jaguar-fltk.squarespace.com/1-lost

Hello,

I created a photo gallery in the style of "Grid: Masonry" and turned on the "Lightbox" function so that visitors can scroll through all the images as pop-up images. My client wants a custom background image (in the style of a newspaper) to be placed behind all the images when they scroll through the gallery. I cannot find any codes to do this. I have provided a mockup of what my client wants. I would really appreciate some help finding a custom code to make this happen!

Thank you!

Your site is private. Can you setup password & share url again? We can check easier

Sorry about that!

The password is: intheNYT

Url: https://burgundy-jaguar-fltk.squarespace.com/1-lost

Thank you!

8 hours ago, taknee said:

Sorry about that!

The password is: intheNYT

Url: https://burgundy-jaguar-fltk.squarespace.com/1-lost

 

Thank you!

Add to Design > Custom CSS

.gallery-lightbox {
    background-image: url(https://cdn.pixabay.com/photo/2021/12/27/21/37/church-6898286__340.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: Center center;
}

Hello,

Thank you for that code, but I was also wondering about adding a background to each image when the image blows up and becomes bigger for people to scroll through (as depicted in the attached photo). Would it be possible to add the newspaper background behind the image when it becomes big instead of just having the white, opaque background?

Thank you again!

Thank you so much @tuanphan! I appreciate your time. It looks perfect!

Hello @tuanphan, I was wondering if there's a new code for this? They updated Squarespace and the code won't apply to new slideshows.

Thank you again!

On 7/15/2022 at 10:21 PM, taknee said:

Hello @tuanphan, I was wondering if there's a new code for this? They updated Squarespace and the code won't apply to new slideshows.

Thank you again!

I see the code still works on my end. Try clearing your browser cache.