0

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>

4
  • Por favor sube tus imágenes a algún banco de imágenes gratuito y cambia tus rutas por la url para poderlas visualizar Commented el 9 nov. 2017 a las 16:45
  • me podrías decir algún banco ?
    – rulotrik
    Commented el 9 nov. 2017 a las 16:51
  • Podrías mirar este Commented el 9 nov. 2017 a las 16:53
  • gracias ya están las imágenes
    – rulotrik
    Commented el 9 nov. 2017 a las 16:54

1 respuesta 1

1

Según lo que entiendo que quieres hacer, podrías resolverlo de la siguiente manera:

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>

Solo debes controlar el atributo overflow de tu div#article para que el efecto parallax se vea de la forma que lo esperas.

2
  • 1
    si era eso lo que quería gracias. ¿la barra de scrool se puede ocultar?
    – rulotrik
    Commented el 9 nov. 2017 a las 17:10
  • Que yo sepa no, por que hay que darle si o si overflow: auto para que pueda existir el scroll, ya podrías darle estilos al scroll para hacer la barra mas pequeña al punto de casi no verse, saludos ! Commented el 9 nov. 2017 a las 17:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.