流体背景图像上的流体图像

Question

i need your help! My client wants a wordpress page with full screen backgrounds. On one of the pages, i need to place 3 images on the fullscreen background image that stay in the exact position and are fluid themselves. 3 persons on the image should be selectable and there will be a lightbox with information about them.

this is how it should look:

this is how the background is 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;
    }

so i need three more pngs as hover images, that stay on the three persons. there would be no problem if it shouldnt be fluid. is there a way to do it with css? i'm a bit of a javascript noob, but if there would be a way, please let me know. i thought 3 pngs in the exact same size as the background and with CSS-Mask would be a solution, but even FF doesnt support that so thats no option. Any ideas?

thanks guys and excuse my english!

Answer 1

Rather than using using background-size:cover or background-size:contain with a full-width bg image:

• Split the content area up into 3 columns (1 for each person).
• Use a responsive design or fluid layout for the width of each column (or if necessary, use JS or jQuery to detect the width and height of the browser and calculate the width needed for each column).
• Add a hyperlink in each column with display:block; width:100%; display:block; width:100%; .
• Add a pair of img tags to the hyperlink with width:100%; height:auto; width:100%; height:auto; (default image and hover image).
• Add mouseover/mouseout event handlers to each hyperlink (using JS or jQuery) that toggle which img tag is hidden.

The advantage of using columns is that the hyperlink hotspots will always match the size and location of each image (which otherwise might be difficult to do for all screen sizes and orientations).