Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » CSS » slider en css con Background-image

CSS - slider en css con Background-image

Volver
Nuevo Tema
<<>>
 
Vista:
Mensajes realizados anteriormente (No estaban la última vez que entraste)slider en css con Background-image
Wilson (25/09/2018 16:26:52)386 visitas
3 respuestas
Mensajes realizados anteriormente (No estaban la última vez que entraste)slider en css con Background-image
santi (27/09/2018 00:05:48)
Mensajes realizados anteriormente (No estaban la última vez que entraste)slider en css con Background-image
wilson (28/09/2018 18:17:35)
Mensajes realizados anteriormente (No estaban la última vez que entraste)slider en css con Background-image
wilson (01/10/2018 14:49:52)

slider en css con Background-image

Publicado por Wilson (1 intervención) el 25/09/2018 16:26:52
Hola amigos estoy intentando de hacer un backgraund que se mueva y con otro efecto que cuando suben la pagina se queda fijo en el fondo.

mi codo es este esta funciona pero no del todo.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<style>
.fixed-bg {
    background-image: url("img_tree.jpg"), url("img/person.png"), url("img/person3.png");
background-position: 10px 0px, 50px, 50px 50px;
background-repeat: no-repeat, no-repeat, no-repeat; /* no repite las iamgenes */
 min-width: 100%;
    min-height: 100%;/* espacio de altura */
    background-attachment: fixed; /* hace el efecto de subir scroll */
 
}
 
@keyframes nube {
     0%{background-position: 0 0;}
     50%{background-position: -200 0;}
     100%{background-position: -400 0;}
 
 
</style>
</head>
<body>
 
<p>In this example, we have created a fixed background image that will disappear slowly on scroll. Scroll the page to see the effect. <strong>Note:</strong> Try to remove the background-attachment property to really understand this example.</p>
 
<div class="fixed-bg"></div>
 
<div style="height:800px;background-color:yellow;">This div is only here to enable scrolling (height = 800 pixels).</div>
 
</body>


cuando lo pongo si la propiedad de Css animation: nube 2s linear infinite;
se desapreciara una fotografía.

en este código

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.fixed-bg {
    background-image: url("img_tree.jpg"), url("img/person.png"), url("img/person3.png");
background-position: 10px 0px, 50px, 50px 50px;
background-repeat: no-repeat, no-repeat, no-repeat; /* no repite las iamgenes */
 min-width: 100%;
    min-height: 100%;/* espacio de altura */
    background-attachment: fixed; /* hace el efecto de subir scroll */
animation: nube 2s linear infinite;
}
 
@keyframes nube {
     0%{background-position: 0 0;}
     50%{background-position: -200 0;}
     100%{background-position: -400 0;}
 
</style>

me gustaria que las tres fotografia se animan como se hace esto?
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de santi
Val: 71
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

slider en css con Background-image

Publicado por santi (27 intervenciones) el 27/09/2018 00:05:48
Hola,

¿tienes algún ejemplo para ver en vivo? Porque no se qué dimensiones tiene cada imagen, ni cual es la que desaparece..

O el html con el css ni que sea para poder ver el resultado,

Gracias ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de wilson
Val: 24
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

slider en css con Background-image

Publicado por wilson (14 intervenciones) el 28/09/2018 18:17:35
te pondre el archivo pero puedes.
solo pega este código en una pagina nueva y aportarle tres archivos de fotos en esta parte.
1
background-image: url("img_tree.jpg"), url("img/person.png"), url("img/person3.png");


Este es el codigo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<html>
<head>
<style>
.fixed-bg {
    background-image: url("img_tree.jpg"), url("img/person.png"), url("img/person3.png");
background-position: 10px 0px, 50px, 50px 50px;
background-repeat: no-repeat, no-repeat, no-repeat; /* no repite las iamgenes */
 min-width: 100%;
    min-height: 100%;/* espacio de altura */
    background-attachment: fixed; /* hace el efecto de subir scroll */
animation: nube 2s linear infinite;
}
 
@keyframes nube {
     0%{background-position: 0 0;}
     50%{background-position: -200 0;}
     100%{background-position: -400 0;}
 
 
</style>
</head>
<body>
 
<p>In this example, we have created a fixed background image that will disappear slowly on scroll. Scroll the page to see the effect. <strong>Note:</strong> Try to remove the background-attachment property to really understand this example.</p>
 
<div class="fixed-bg"></div>
 
<div style="height:800px;background-color:yellow;">This div is only here to enable scrolling (height = 800 pixels).</div>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de wilson
Val: 24
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

slider en css con Background-image

Publicado por wilson (14 intervenciones) el 01/10/2018 14:49:52
Hola amigo encontre un demo hecho en internet pero tieen mucho codigo.
El demo tiene child() y un span luego pero no entiendo como usar un span asi.
si lo quieres ver me dices
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar