CSS - Ajustar imagen a tamaño de ventana

 
Vista:

Ajustar imagen a tamaño de ventana

Publicado por Pablo (4 intervenciones) el 05/06/2020 23:19:53
¿Cómo puedo ajustar una imágen de fondo al tamaño de la ventana, sea cual sea esta?

Me he bajado una imágen para un background y es mucho más grande que mis pantallas.

He intentado con

background-size: cover;
y
background-size: contain;

pero no ha dado con la forma.

Me sale un fondo proporcionado, pero o se repite o si le pongo no-repeat se ve el fondo de color fijo.
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 joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ajustar imagen a tamaño de ventana

Publicado por joel (252 intervenciones) el 06/06/2020 21:28:12
Pero quieres que se distorsione la imagen si el tamaño no es proporcional a la imagen?
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

Ajustar imagen a tamaño de ventana

Publicado por Pablo (4 intervenciones) el 07/06/2020 19:05:01
Gracias Joel por tu tiempo.

He encontrado una plantilla: https://startbootstrap.com/themes/grayscale/ que me hace lo que necesito.

En realidad no modifica la imágen, sino que a partir de una cierta resolución se la va "comiendo", para evitar aberraciones.

Tengo que analizar la css para ver cómo lo hace, pero en principio me sirve.

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 ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ajustar imagen a tamaño de ventana

Publicado por ScriptShow (125 intervenciones) el 07/06/2020 22:00:10
Saludos Pablo,

para lo que quieres hacer, no es necesario ese derroche de librerías de terceros. Es suficiente con CSS3 y HTML5. No compliques algo tan sencillo y realizable con 2 Kb. max.

1
2
3
4
5
6
7
8
body {
background: url('imagen.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-ms-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

https://www.lawebdelprogramador.com/codigo/CSS/4636-Parallax-Scrolling-Simple.html

Espero sea útil.
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

Ajustar imagen a tamaño de ventana

Publicado por Golo (1 intervención) el 08/06/2020 02:49:13
Tus contribuciones son excelentes. Lástima los comentarios pedantes e inútiles que los acompañan.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de ScriptShow
Val: 571
Plata
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ajustar imagen a tamaño de ventana

Publicado por ScriptShow (125 intervenciones) el 08/06/2020 23:04:42
Es cierto, tienes razón en cuanto a los comentarios. Pido disculpas por mis formas. Gracias por tu opinión.

Un cordial saludo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de joel
Val: 870
Oro
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ajustar imagen a tamaño de ventana

Publicado por joel (252 intervenciones) el 09/06/2020 07:55:17
No hagas caso ScriptShow!!! que un anonimo no te quite las ganas de continuar... somos muchos los que agradecemos tus aportaciones y comentarios!!
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