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!
Rather than using using background-size:cover
or background-size:contain
with a full-width bg image:
display:block; width:100%;
display:block; width:100%;
. width:100%; height:auto;
width:100%; height:auto;
(default image and hover image). 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).
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.