I'm trying to fix an image to the grey background so when I scroll above the red div covers them up

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
    /* The image used */
    background-image: url("grey.jpg");
    z-index: 1;
    position: relative;

    /* Set a specific height */
    min-height: 700px; 

    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}


/*These are property I assigned to the dog image (was just experimenting with the z-index) */
.parallax img{
    z-index: 2;
    border: 2px solid black;
    position: relative;
    top: 10px;
    background-attachment: fixed;

}

</style>
</head>
<body>

<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>

<div class="parallax"><img src="dog.jpg" width="250px" height="250px"></div>


<div style="height:600px;background-color:red;font-size:36px;position: 
relative; top: -220px; z-index: 3;">


</body>
</html>

The original code is different.

There is a red div I want it to float over the dog image that should be fixed to the grey background. The dog image and red div are floating together and I don't want that! I want just the red div to float over them. I tried experimenting with the z-index and stuff but all in vain.

I tried all the ways to accomplish that parallax kind of effect.

These are the links to the images used:

This is the image used

This is the grey background used.

1 answer

  • answered 2018-08-09 10:58 Jackson

    You are trying to give the dog image a 'fixed' position using css:

    .parallax img{
        /*...*/
        background-attachment: fixed;
    }
    

    Instead try to use position: fixed like this:

    .parallax img{
        /*...*/
        position: fixed;
    }