CSS-HTML：使用 html 和 css 将图像放在另一个图像之上

Question

I'm very newbie to webdev, but I need to draft a landingpage with some trick effects. I need to put a "stencil image" (png with transp) over a moving (mouse hover) background. Basically, I managed to do that, but I having a big issue: If I resize browser, the background shows behind first plane image, (because I can't rezise background to browser size). So, the main codes are:

html code:

<div id="bkg-image" class="blur"></div> 

<div>
<img  src="./imgs/stencil.png" class="firstPlane" />

</div>

CSS code:

#bkg-image {
    background: url('./imgs/background.jpg') no-repeat center center fixed;
    position: absolute;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    width: 75%;
    height: 75%;
    z-index: 0;
    -webkit-filter: brightness(1.7);
}

.firstPlane {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    max-width: 100%;
    height: auto;
    width: auto;
    z-index: 2;
}

JS code:

$(document).ready(function() {
    var movementStrength = 75;
    var height = movementStrength / $(window).height();
    var width = movementStrength / $(window).width();
    $(".firstPlane").mousemove(function(e) {
        var pageX = e.pageX - ($(window).width() / 2);
        var pageY = e.pageY - ($(window).height() / 2);
        var newvalueX = width * pageX * -1;
        var newvalueY = height * pageY * -1;
        $('#bkg-image').css("background-position", newvalueX + "px     " + newvalueY + "px");
    });
});

Any idea how to crop the excess background or how to rescale it to fit behind firstplane image?

note: blur class is just for an animated blur effect, not relevant to this. I took the java script from a net tutorial.

My first aproach was using webkit mask-image, but seens it don't works, now I'm trying this method.

Thanks a lot for any help

Answer 1

You are doing it upside down. This is how it should be.

$(document).ready(function() {
    $("#bkg-image").mousemove(function(e) { 
        $('.firstPlane').css({left: e.pageX + "px", top: e.pageY + "px"});
    });
});

Answer 2

I need invert the selection: I need read the mouse position on first plane and apply movement to the bkg image. (your script only works if I switch #bkg-image and.firstPlane). My issue isn't read the movement, but crop bkg-image to not show it bellow 1st plane when I have a small and tall browser window.

The solution would be a mask/clip image, but its not working for svg graphics or PNG for me, so I give up and tried with a big black PNG with transp on it to show background. Something like this: (https://codepen.io/caraujo/pen/rVOZKJ) but with a logo (vector or png), but mask/image clip is not working for me:/