Estire y escale una imagen CSS en segundo plano, solo con CSS

Quiero que mi imagen de fondo se estire y se amplíe según el tamaño de la ventana del navegador.

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

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

width:100%; height:100%;

Funciona, pero esa pregunta es un poco vieja y afirma que en CSS 3, cambiar el tamaño de una imagen de fondo funcionará bastante bien. He probado esto ejemplo el primero, pero no funcionó para mí.

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

preguntado el 19 de julio de 09 a las 12:07

tamaño de fondo: 100% 100%; -

Quizás esta demostración pueda ser útil: w3schools.com/cssref/… -

@AlexAngas ¿No debería ser un factor la edad de la pregunta? Este se hizo hace 6 años y la pregunta que ha señalado se hizo hace 4 años. -

@ FábioAntunes En mi humilde opinión, no quisiéramos cerrar la pregunta con las mejores respuestas y, en su lugar, alentar a los duplicados a vincularse a ella. Estoy seguro de que esto se habría discutido en Meta pero no puedo encontrarlo ahora ... -

22 Respuestas

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

Esto escala la imagen para que el área de fondo esté 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 sea visible si el ancho / alto de la imagen redimensionada es demasiado grande.

Respondido 03 ago 19, 16:08

Cubrir recorta la imagen si la relación de aspecto no coincide, por lo que no es una buena solución general. - mahemoff

en caso de que desee que funcione en los navegadores IE - github.com/louisremi/background-size-polyfill - naufragios

No parece funcionar en Firefox. Sin emabargo, background-size: 100vw 100vh;hace el truco muy bien. - Yannick Mauray

@YannickMauray prueba: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover; - Amit Kumar Khare

Si desea esto, pero solo para el eje horizontal, use esto: background-size: 100% auto; stackoverflow.com/questions/41025630/… - antoinemopa

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

background-size: 100%;

Respondido 28 Feb 11, 00:02

@nXqd ¡Ese es prácticamente el código completo! Crea un contenedor con un background-image e incluir la propiedad anterior. Como se mencionó, el soporte del navegador aún no es bueno y hay versiones específicas del navegador de este, es decir. -webkit-background-size etc. Ver Módulo W3C CSS3: tamaño de fondo y css3.info: tamaño de fondo - MrWhite

Para conservar la relación de aspecto de la imagen, debe utilizar "background-size: cover;" o "tamaño de fondo: contener;". He construido un polyfill que implementa esos valores en IE8: github.com/louisremi/background-size-polyfill - Louis Rémi

También es recomendable agregar auto para conservar la relación de aspecto. - Chibueze Opata

Usando el patrón de velas del código Yo mencione...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

CO

#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 se desplazará el contenido, no el fondo.

La imagen de fondo cambia de tamaño 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 mientras el contenido se desplaza.

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

contestado el 23 de mayo de 17 a las 13:05

Pero esta no es una imagen de fondo. Solo puede hacer esto en un bloque, pero no en un elemento en línea como una entrada [tipo = texto]. ¿O me equivoco? - ciervo

no es necesario el class = "stretch", solo use #background img {} como identificador en el css - BerggreenDK

índice z: -1; mantiene su imagen en segundo plano. Si desea mostrar su imagen en primer plano, puede aumentar el valor del índice z o eliminar ese índice. - gohanakkurt

El problema que tengo es con IE8. La imagen de fondo de un DIV se extiende por completo, pero en IE8 las imágenes salen del DIV, por lo que no se puede ver la imagen completa. Se recorta. Esta es mi pregunta: stackoverflow.com/questions/22331179/… - Si8

El error obvio que comete la gente es poner la imagen de fondo en el CSS (es decir, por background : url("example.png");) y luego use el atributo css background-size:100%; debajo de él para escalar la imagen al ancho de la pantalla. Esto no funcionará, ¿verdad? Si desea poner una imagen de fondo para el cuerpo, debe agregar un atributo de imagen a la etiqueta del cuerpo como <body background="example.png">. Entonces usa css background-size:100%; para escalarlo. - sjsam

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*/
}

Respondido 16 Oct 13, 01:10

Sin embargo, esto no funciona en IE8. Crea un margen en la parte superior e inferior de la ventana. - erdomestre

En Android funcionó para cuando se usa html, body {...} en lugar de body {...}. - Edward

background-size: 100% 100%; 

estira el fondo para llenar todo el elemento en ambos ejes.

Respondido 03 ago 19, 16:08

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

Hago esto dinámicamente para cada página. Por lo tanto, utilizo PHP para generar su propia etiqueta HTML para cada página. Todas las imágenes están en la carpeta 'imagen' y terminan con '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 el $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 se probó con Internet Explorer 9, Chrome 21 y Firefox 14.

respondido 18 nov., 14:17

Su ejemplo no funciona en el sentido de compatibilidad con versiones anteriores, porque simplemente se olvidó del '-' de los prefijos del proveedor. Debe ser -webkit-background-size, -moz-background-size y así. Ver desarrollador.mozilla.org/en-US/docs/CSS/… O opta por incluirlo a prueba de futuro en propiedades taquigráficas como background: url(img/bg-home.jpg) no-repeat center center / cover fixed; - Volker E.

Esta fue la única solución que funcionaría para mí en IE9. Gracias. - Robnick

Utilice este CSS:

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

contestado el 09 de mayo de 11 a las 10:05

De hecho, 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.

Respondido 19 Jul 09, 18:07

Eso es lo que vi en otras preguntas de SO, y funciona, pero desde que salió CSS3, pensé que ahora era una mejor manera de hacerlo. - fabio antunes

Puede haberlos y teniendo en cuenta los avances en el uso del navegador, es posible que pueda usarlos comercialmente en solo ... ¿10 años? - kim stebel

Al ser CSS3, no hay nada de malo en usar una propiedad que ven los navegadores más modernos y dar un estándar mínimo a los navegadores no compatibles. Aquí, por ejemplo, es posible que pueda utilizar un fondo en mosaico aburrido pero aceptable para Dan golpes

Acabo de encontrar esta otra publicación que hace referencia al uso del MS AlphaImageLoader propietario: stackoverflow.com/questions/2991623/… - feomunky

Puede agregar esta clase a su archivo CSS.

.stretch {
    background: url(images/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 después
  • Opera 10 o posterior (compatible con Opera 9.5 background-size, pero no las palabras clave)
  • Firefox 3.6 o posterior (Firefox 4 admite una versión con prefijo que no sea de un proveedor)

Respondido 03 ago 19, 16:08

Esta es una respuesta funcional de "estirarse para adaptarse". Nota: la relación de aspecto cambiará. - devdrc

Se explica mediante trucos CSS: Imagen de fondo de página completa perfecta

Demostración: 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;
}

Respondido 03 ago 19, 16:08

según la respuesta anterior, he visto que la corrección de archivos adjuntos en segundo plano no funciona en dispositivos móviles y microsoft edge. La solución perfecta para hacer que el fondo se estire y se arregle en todos los dispositivos y navegadores que recomiendo jquery-backstretch.com - Aamer Shahzad

Para escalar sus imágenes de manera adecuada según el tamaño del contenedor, utilice lo siguiente:

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

Respondido 22 ago 19, 12:08

Yo uso esto y funciona con todos los navegadores:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>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.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>

Respondido el 30 de Septiembre de 12 a las 16:09

¡Gracias!

Pero entonces no funcionó para el Google Chrome y Safari navegadores (el estiramiento funcionó, ¡pero la altura de las imágenes era de solo 2 mm!), hasta que alguien me dijo lo que falta:

Intenta configurar height:auto;min-height:100%;

Así que cambia eso por tu 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 de ese código recién agregado, tengo esto en mi Drupal Tense temas style.css:

html, cuerpo {altura: 100%;}

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

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

<img alt = "" class = "stretch" src = "pic.url" />

Simplemente copiar una imagen con el editor en ese bloque de Drupal no funciona; hay que cambiar el editor a texto sin formato.

Respondido el 22 de Septiembre de 13 a las 13:09

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 establezca 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 utilizando el user-select:none Regla CSS, así:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

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

También por 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), puede pasar a la parte superior de la página.

Respondido 23 Jul 14, 16:07

entonces no use img solo un div con bg, no debería ser seleccionado - Jacek Pietal

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: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

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

Respondido el 22 de Septiembre de 13 a las 13:09

Usé una combinación de las propiedades CSS background-X para lograr la imagen de fondo de escala ideal.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Esto hace que el fondo siempre cubra toda la ventana del navegador y permanezca centrado al escalar.

Respondido 03 ago 19, 16:08

Use el Estiramiento de espalda enchufar. Incluso se pueden hacer deslizar varias imágenes. También funciona dentro de contenedores. De esta manera, por ejemplo, se podría haber cubierto solo una parte del fondo con una imagen de fondo.

Dado que incluso yo pude hacer que funcione, demuestra que es un complemento fácil de usar :).

Respondido el 22 de Septiembre de 13 a las 13:09

Si desea tener el contenido centrado horizontalmente, use una combinación como esta:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Esto se verá hermoso.

Respondido 03 ago 19, 16:08

Utilice este CSS:

background-size: 100% 100%

respondido 19 nov., 18:12

Downwoted, esto es un duplicado de la respuesta anterior stackoverflow.com/a/35021247/3810453 - zanshin13

@ Zanshin13 No sabía sobre la pregunta anterior. ¡Entonces tienes que votar para cerrar la pregunta, no rechazar mi respuesta! - Shady Mohamed Sherif

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

El border-image La propiedad es muy útil si su hoja de estilo está implementada en algún lugar que no sea compatible con CSS 3. Si está utilizando Google Chrome o Firefox, le recomiendo la background-size:cover propiedad en sí.

Respondido 03 ago 19, 16:08

Lo siguiente funcionó para mí.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

que funcionó para cubrir todo el fondo en diferentes dimensiones

respondido 25 mar '20, 21:03

¿Quieres conseguirlo con solo una imagen? Porque en realidad puedes hacer algo similar a un fondo alargado usando dos imágenes. PNG imágenes, 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 y los navegadores.

Respondido el 30 de Septiembre de 12 a las 16:09

Buen punto. Pero estoy usando jpg para la imagen de fondo, su tamaño es de 1500x1000 y solo requiere poco más de 100kb. ¿Pero cómo lo hiciste? - fabio antunes

¿Qué tal centrar la imagen horizontalmente y suavizar los bordes de la imagen con un color sólido o un patrón? Esto le permitiría tener una adaptación perfecta si el usuario tiene más que la resolución de la imagen. - MarioRicalde

Pero quiero que la imagen llene el fondo. El que dices, eso es lo que suelo hacer. - fabio antunes

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.