Estirar y escalar una imagen CSS en el fondo - sólo con CSS

Quiero que mi imagen de fondo se estire y escale en función del tamaño de la ventana gráfica del navegador.

He visto algunas preguntas en Stack Overflow que hacen el trabajo, como Stretch and scale CSS background por ejemplo. Funciona bien, pero quiero colocar la imagen usando background, no con una etiqueta img.

En ese se coloca una etiqueta img, y luego con CSS se tributa a la etiqueta img.

width:100%; height:100%;

Funciona, pero esa pregunta es un poco antigua, y dice que en CSS 3 el redimensionamiento de una imagen de fondo funciona bastante bien. Yo'he probado esto ejemplo el primero, pero no me ha funcionado.

¿Hay un buen método para hacerlo con la declaración background-image?

Community
Pregunta editada 23º mayo 2017 в 12:26
Programación
background css
19º julio 2009 в 3:51
32 vistas

Usando el código que mencioné...

HTML

<div id="background">

</div>

CSS

#background {
    width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; 
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}

.stretch {
    width:100%;
    height:100%;
}

Esto produce el efecto deseado: sólo el contenido se desplazará, no el fondo.

La imagen de fondo se ajusta a la ventana gráfica del navegador para cualquier tamaño de pantalla. Cuando el contenido no se ajusta a la ventana gráfica del navegador y el usuario necesita desplazar la página, la imagen de fondo permanece fija en la ventana gráfica mientras el contenido se desplaza.

Con CSS 3 parece que esto sería mucho más fácil.

Community
Respuesta editada 23º mayo 2017 в 12:26
Comentarios (5)

En realidad puedes conseguir el mismo efecto que una imagen de fondo con la etiqueta img. Sólo tienes que establecer su índice z más bajo que todo lo demás, establecer position:absolute y utilizar un fondo transparente para cada cuadro en primer plano.

Comentarios (4)

¿Quiere conseguirlo sólo con una imagen? Porque en realidad se puede hacer algo similar a un fondo de estiramiento utilizando dos imágenes. Por ejemplo, imágenes PNG.

Lo he hecho antes y no es tan difícil. Además, creo que el estiramiento sólo dañaría la calidad del fondo. Y si añades una imagen enorme se ralentizarían los ordenadores y navegadores lentos.

Peter Mortensen
Respuesta editada 30º septiembre 2012 в 3:51
Comentarios (3)