parallax inside div

Question

parallax inside div

Navigation

#1 by (1 votes)

0

I want to apply a parallax effect in div so that when I pass the text I change the image but the second image places it outside the div father

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>

html css

asked by rulotrik 09.11.2017 в 17:36

source

1 answer

How do I use an event inside a "class" javascript, from the mouseup of a container? When entering the temperature value, I must determine the type of climate

score 1 · Accepted Answer

According to what I understand what you want to do, you could solve it in the following way:

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;
    overflow-y: auto;
    overflow-x: hidden;
}

   
.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>

You should only control the overflow attribute of your div#article so that the parallax effect looks the way you expect it to.