Pregunta Estirar y escalar una imagen CSS en segundo plano, solo con CSS


Quiero que mi imagen de fondo se estire y escale dependiendo del tamaño de la ventana del navegador.

He visto algunas preguntas sobre Stack Overflow que hacen el trabajo, como Estirar y escalar fondo CSS por ejemplo. Funciona bien, pero quiero colocar la imagen usando background, no con un img etiqueta.

En ese uno img la etiqueta se coloca, y luego con CSS rendimos homenaje a la img etiqueta.

width:100%; height:100%;

Funciona, pero esa pregunta es un poco antigua, y afirma que en CSS 3 redimensionar una imagen de fondo funcionará bastante bien. Lo he intentado ejemplo, el primero, pero no funcionó para mí.

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


734
2017-07-19 15:51


origen


Respuestas:


CSS3 tiene un pequeño y agradable atributo llamado background-size:cover.

Esto escala la imagen para que el área de fondo quede completamente cubierta por la imagen de fondo mientras se mantiene la relación de aspecto. Se cubrirá toda el área; sin embargo, parte de la imagen puede no estar visible si el ancho / alto de la imagen cambia de tamaño es demasiado grande


889
2017-09-10 14:28



Puede usar la propiedad CSS3 para hacerlo bastante bien. Cambia el tamaño a la proporción para que no distorsione la imagen (aunque sí las imágenes pequeñas de alto nivel). Solo tenga en cuenta que aún no está implementado en todos los navegadores.

background-size: 100%;

451
2018-02-28 00:44



Utilizando el código Yo mencione...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</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%;
}

Eso produce el efecto deseado: solo el contenido se desplazará, no el fondo.

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

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


181
2017-07-30 18:21



CSS:

html,body {
    background: url(images/bg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover; /* For WebKit*/
    -moz-background-size: cover;    /* Mozilla*/
    -o-background-size: cover;      /* Opera*/
    background-size: cover;         /* Generic*/
}

157
2018-03-23 19:58



background-size: 100% 100%; 

se extiende bg para llenar todo el elemento en ambos ejes


41
2018-01-26 18:34



La siguiente parte de CSS debería estirar la imagen con todos los navegadores.

Lo hago dinámicamente para cada página. Por lo tanto, uso PHP para generar su propia etiqueta HTML para cada página. Todas las imágenes están en la carpeta 'imagen' y terminan en 'Bg.jpg'.

<html style="
      background: url(images/'.$pic.'Bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
      filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Si solo tiene una imagen de fondo para todas las páginas, puede eliminar la $pic variable, elimine las barras diagonales que se escapan, ajuste las rutas y coloque este código en su archivo CSS.

html{
    background: url(images/homeBg.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg',     sizingMethod='scale');
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale');
}

Esto fue probado con Internet Explorer 9, Chrome 21 y Firefox 14.


39
2017-08-06 13:41



Use este CSS:

background: url('img.png') no-repeat; 
background-size: 100%;

17
2018-05-09 09:41



En realidad, puede lograr el mismo efecto que una imagen de fondo con la etiqueta img. Solo tiene que establecer su índice z más bajo que todo lo demás, establecer la posición: absoluta y usar un fondo transparente para cada cuadro en primer plano.


15
2017-07-19 17:14