Hello everyone, I could really use some assistance! My client is looking for a WordPress page with full screen backgrounds. Specifically, on one of the pages, they want 3 images placed on a fullscreen background image that remain in a fixed position while being fluid themselves. These 3 persons on the image should be clickable, leading to a lightbox with more information about them.
This is the desired look:
Here is how the background should be positioned:
.bg{
background: url(images/gang.jpg);
background-repeat:no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
width:100%;
height:100%;
position:fixed;
left:0;
top:0;
z-index:-700;
}
Therefore, I need three additional png images as hover images that will stick to the three individual persons on the background. It wouldn't be an issue if they weren't fluid. Is there a way to achieve this using CSS? I am not very experienced with JavaScript, but if it's possible that way, please share your knowledge. Initially, I considered using 3 pngs in the exact same size as the background and applying CSS Mask, however, even Firefox doesn't support that feature so it's not a viable option. Any suggestions would be greatly appreciated!
Thank you all in advance for your help, and please forgive any mistakes in my English!