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 Desbordamiento de stack que hacen el trabajo, como Estirar y escalar fondo CSS, por ejemplo. Funciona bien, pero quiero colocar la imagen usando el background , no con una etiqueta img .

En esa, se coloca una etiqueta img , y luego con CSS, tributamos a la etiqueta img .

 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. He probado este ejemplo el primero , pero no funcionó para mí.

¿Hay un buen método para hacerlo con la statement de background-image ?

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, es posible que parte de la imagen no esté visible si el ancho / alto de la imagen cambia de tamaño es demasiado grande.

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%; 

Usando el código que mencioné …

HTML

 

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.

CSS:

 html,body { background: url(images/https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only/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*/ } 
 background-size: 100% 100%; 

se extiende bg para llenar todo el elemento en ambos ejes

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’.

  

Si solo tiene una imagen de fondo para todas las páginas, puede eliminar la variable $pic , eliminar las barras diagonales que escapan, ajustar las rutas y colocar 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.

Use este CSS:

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

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.

Puede agregar esta clase a su archivo CSS.

 .stretch { background: url(images/https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Funciona en:

  • Safari 3 o posterior
  • Chrome Lo que sea o más tarde
  • Internet Explorer 9 o posterior
  • Opera 10 o posterior (Opera 9.5 admite background-size , pero no las palabras clave)
  • Firefox 3.6 o posterior (Firefox 4 es compatible con la versión con prefijo de un proveedor)

Explicado por css-tricks https://css-tricks.com/perfect-full-page-background-image/

demo: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

código:

 body { background: url(images/myBackground.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Para escalar sus imágenes de forma adecuada en función del tamaño del contenedor, se encuentra lo siguiente:

 { background-size:contain; background-repeat: no-repeat; } 

Lo uso y funciona con todos los navegadores:

   Stretched Background Image      
Smile

Stretch that Background Image!

This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.

Go on, try it - resize your browser!

Estoy de acuerdo con la imagen en div absoluto con 100% de ancho y alto. Asegúrese de establecer el 100% de ancho y alto para el cuerpo en el CSS y establecer los márgenes y el relleno en cero. Otro problema que encontrará con este método es que al seleccionar texto, el área de selección a veces puede abarcar la imagen de fondo, lo que tiene el desafortunado efecto de hacer que la página completa tenga el estado seleccionado. Puede solucionar esto usando la regla de user-select:none , como esta:

      
content here

Nuevamente, Internet Explorer es el tipo malo aquí, porque no reconoce la opción de selección del usuario, ni siquiera la vista previa de Internet Explorer 10 lo admite, por lo que tiene la opción de usar JavaScript para evitar la selección de la imagen de fondo (por ejemplo, http : //www.felgall.com/jstip35.htm ) o utilizando el método de fondo de CSS 3 .

Además, para SEO , pondría la imagen de fondo en la parte inferior de la página, pero si la imagen de fondo tarda demasiado en cargarse (es decir, con un fondo blanco inicialmente), podría pasar a la parte superior de la página.

¡Gracias!

Pero luego no funcionaba para los navegadores Google Chrome y Safari (¡el trabajo se extendía, pero la altura de las imágenes era solo de 2 mm!) , Hasta que alguien me dijo lo que faltaba:

Intente establecer la height:auto;min-height:100%;

Así que cambie eso para su height:100%; línea, da:

 #### #background { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; } .stretch { width:100%; height:auto; min-height:100%; } 

Justo antes del código recién agregado, tengo esto en mis temas de Drupal Tendu style.css :

html, cuerpo {altura: 100%;}

#page {background: #ffffff; altura: auto! importante; altura: 100%; altura mínima: 100%; posición: relativa;

Entonces tengo que hacer un nuevo bloque dentro de Drupal con la imagen mientras agrego class=stretch :

Solo copiar una imagen con el editor en ese bloque de Drupal no funciona; uno tiene que cambiar el editor a texto no formateado.

Quería centrar y escalar una imagen de fondo, sin estirarla a toda la página, y quería que se mantuviera la relación de aspecto. Esto funcionó para mí, gracias a las variaciones sugeridas en otras respuestas:

IMAGEN EN LÍNEA: ————————

 

CSS ———————————-

 html { height:100%; } #background { text-align: center; width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; } .stretch { margin: auto; height:100%; } 

Use el plugin Backstretch . Incluso se podrían hacer deslizar varias imágenes. También funciona dentro de contenedores. De esta manera, por ejemplo, uno podría tener solo una parte del fondo cubierto con una imagen de fondo.

Desde que incluso pude hacerlo funcionar, prueba que es un plugin fácil de usar :).

Puede usar la propiedad border-image : yourimage para escalar la imagen hasta el borde, incluso si le da la imagen de fondo, entonces la imagen del borde se dibujará sobre ella.

border-image property es muy útil si su hoja de estilo se implementa en algún lugar que no sea compatible con CSS3. Si está utilizando Chrome de Firefox, entonces le recomiendo el background-size:cover propiedad de la background-size:cover sí.

¿Desea lograr esto simplemente usando una imagen? Porque en realidad puedes hacer algo parecido a un fondo de estiramiento usando dos imágenes. Imágenes PNG, por ejemplo.

He hecho esto antes, y no es tan difícil. Además, creo que estirar solo dañaría la calidad del fondo. Y si agrega una imagen enorme, ralentizaría las computadoras lentas y los navegadores.