Cómo colocar una imagen fija en css
Resuelto/Cerrado
guille001
Mensajes enviados
2
Fecha de inscripción
lunes, 13 de junio de 2016
Estatus
Miembro
Última intervención
miércoles, 22 de junio de 2016
-
13 jun 2016 a las 18:28
guille001 - 24 jun 2016 a las 21:37
guille001 - 24 jun 2016 a las 21:37
Hola, estoy haciendo mi web y me gustaría que una foto en un div se comporte algo similar a lo que aparece en esta web:
http://www.spenagroup.com/ambientales/
Como ven, al bajar el scroll, se comporta como una ventana donde puedes ver la imagen de fondo, por favor si alguien me puede ayudar a cómo hacer eso estaría muy agradecido.
http://www.spenagroup.com/ambientales/
Como ven, al bajar el scroll, se comporta como una ventana donde puedes ver la imagen de fondo, por favor si alguien me puede ayudar a cómo hacer eso estaría muy agradecido.
Consulta también:
- Imagen estatica css
- Css descargar - Programas - Diseño y desarrollo web
- Buscar fuente por imagen dafont - Guide
- Quitar subrayado hipervinculo css - Guide
- Ps3 no da imagen - Guide
- Pc no da imagen ni bios - Foro BIOS
1 respuesta
Antleiva
Mensajes enviados
35
Fecha de inscripción
jueves, 9 de junio de 2016
Estatus
Miembro
Última intervención
viernes, 24 de junio de 2016
16
15 jun 2016 a las 10:39
15 jun 2016 a las 10:39
De hecho es una ventana por así decirlo. Lo único que hacen ahí es poner esa imagen de fondo. Y la parte del body esa "ventana" le han dado una transparencia total, de ahí ese efecto que al bajar se queda fija la imagen pero en realidad esta detrás de fondo. Un saludo.
15 jun 2016 a las 21:44
16 jun 2016 a las 10:15
22 jun 2016 a las 15:47
24 jun 2016 a las 12:51
Modificado por guille001 el 24/06/2016, 21:37
background-attachment:fixed; este le da una posición fija a la imagen como se ve vio en esa página ( http://www.spenagroup.com/ambientales/ ).
background-position:center; Con este lo centré porque mi foto se iba todo para la izquierda.
background-repeat:no-repeat; y con este impedí que se repitiera mi foto
Ejemplo:
#div-imgen{
width:1080px;
height:500px;
background-image:url(image/imagen.png);
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
}