Quiero aplicar un efecto parallax
dentro del div
para que cuando pase el texto me cambie la imagen pero la segunda imagen me la coloca fuera del div
padre
html, body{
padding: 0;
margin: 0;
width: 100%;
height: 100%;
background-size: 100%;
background-repeat: repeat;
background-attachment: fixed;
}
#article{
background-color: rgb(126,230,222, 0);
padding: 0;
height: 70%;
width: 55%;
margin: 0 auto;
border-radius: 20px 20px 20px 20px;
box-shadow: rgba(0,0,0,0.8) 0 0 10px;
}
.text {
background-color: aqua;
height: 15%;
width: 100%;
}
#imagen1{
background-image: url("https://i.imgur.com/wi2SHGD.jpg");
height:100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
#imagen2{
background-image: url("https://i.imgur.com/kxnzTtA.jpg");
height:100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
}
<div id="article">
<div id="imagen1">
<div class="text">
aaaaaaaaaaaaaaaaaaaaaaaaaa
</div> <!-- If you want text inside the container -->
</div>
<div id="imagen2">
<div class="text">
aaaaaaaaaaaaaaaaaaaaaaaaaa
</div> <!-- If you want text inside the container -->
</div>
</div>