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

853

Quiero que mi imagen de fondo se estire y escale dependiendo del tamaño de la ventana de visualización 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 una imgetiqueta.

En ese imgse coloca una etiqueta, y luego con CSS hacemos un homenaje a la imgetiqueta.

width:100%; height:100%;

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

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

css  background 
— Fábio Antunes
fuente
113
tamaño de fondo: 100% 100%;
— Andreas L.
55
Quizás esta demostración pueda ser útil: w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas ¿No debería ser un factor la edad de la pregunta? Esta se hizo hace 6 años y la pregunta que ha señalado se hizo hace 4 años.
— Fábio Antunes
@ 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 vincularla. Estoy seguro de que esto se habría discutido en Meta, pero no puedo encontrarlo ahora ...
— Alex Angas

Respuestas:

1048

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. Toda el área estará cubierta. Sin embargo, parte de la imagen puede no ser visible si el ancho / alto de la imagen redimensionada es demasiado grande.

— Vashishtha Jogi
fuente
11
Cubrir recorta la imagen si la relación de aspecto no coincide, por lo que no es una buena solución general.
— mahemoff
1
en caso de que quiera que funcione en los navegadores IE - github.com/louisremi/background-size-polyfill
— Wreeecks
44
No parece funcionar en Firefox. Sin embargo, background-size: 100vw 100vh;funciona bien.
— Yannick Mauray
55
@YannickMauray intenta: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
Si desea esto, pero solo para el eje horizontal, use esto: background-size: 100% auto; stackoverflow.com/questions/41025630/…
— antoineMoPa
470

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

background-size: 100%;
— Matt Burgess
fuente
19
@nXqd ¡Ese es prácticamente el código completo! Cree un contenedor con a background-imagee incluya la propiedad anterior. Como se mencionó, el soporte del navegador aún no es bueno y hay versiones específicas de este, es decir. -webkit-background-sizeetc. Vea el módulo W3C CSS3: background-size y css3.info: background-size
— MrWhite
15
Para preservar la relación de aspecto de la imagen, debe usar "background-size: cover;" o "tamaño de fondo: contener;". He creado un polyfill que implementa esos valores en IE8: github.com/louisremi/background-size-polyfill
— Louis-Rémi
44
También es aconsejable agregar autopara preservar la relación de aspecto.
— Chibueze Opata
186

Usando el código que mencioné ...

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 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 gráfica 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.

— Fábio Antunes
fuente
12
Pero esto no es imagen de fondo. Solo puede hacer esto en un bloque, pero no en un elemento en línea como una entrada [tipo = texto]. ¿O estoy equivocado?
— ciervo
11
no es necesario el class = "stretch", solo use #background img {} como identificador en el CSS
— BerggreenDK
índice z: -1; mantiene tu imagen en segundo plano. Si desea mostrar su imagen en primer plano, puede aumentar el valor del índice z o eliminar ese índice.
— gokhanakkurt
El problema que estoy teniendo es con IE8. La imagen de fondo de un DIV se extiende por completo, pero en IE8 las imágenes salen del DIV y, por lo tanto, no pueden ver la imagen completa. Se recorta. Aquí está mi pregunta: stackoverflow.com/questions/22331179/…
— Si8
1
El error obvio que cometen las personas es colocar la imagen de fondo en el CSS (es decir, by background : url("example.png");) y luego usar el atributo CSS background-size:100%;debajo de él para, con suerte, escalar la imagen al ancho de la pantalla. Esto no funcionará, ¿verdad? Si desea poner una imagen de fondo para el cuerpo, entonces se debe agregar un atributo de imagen a la etiqueta del cuerpo como <body background="example.png">. Luego usa css background-size:100%;para escalarlo.
— sjsam
166

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*/
}
— Josh Crozier
fuente
Sin embargo, esto no funciona en IE8. Crea un margen en la parte superior e inferior de la ventana.
— erdomester
En Android funcionaba cuando se usaba en html, body {...}lugar de body {...}.
— Edward
53 
background-size: 100% 100%;

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

— yeahdixon
fuente
40

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, 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 $picvariable, eliminar las barras diagonales de escape, 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 se probó con Internet Explorer 9, Chrome 21 y Firefox 14.

— Thorsten Niehues
fuente
2
Su ejemplo no funciona en el sentido de compatibilidad con versiones anteriores, porque simplemente se olvidó de los principales prefijos de proveedor '-'. Debe ser -webkit-background-size, -moz-background-sizey así sucesivamente. Ver developer.mozilla.org/en-US/docs/CSS/… O puede incluirlo a prueba de futuro en propiedades abreviadas comobackground: 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
17

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.

— Kim Stebel
fuente
Eso es lo que vi en otras preguntas SO, y funciona, pero desde que salió CSS3, pensé que ahora era una mejor manera de hacerlo.
— Fábio Antunes
3
Puede haber y teniendo en cuenta los desarrollos en el uso del navegador, es posible que pueda usarlos comercialmente en solo ... ¿10 años?
— Kim Stebel el
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, puede usar un fondo de mosaico aburrido pero aceptable para <IE8 y una imagen encantadora para Firefox / Chrome / Safari / Opera. Además, hay muchos polyfills para replicar la funcionalidad CSS3 en navegadores antiguos con JavaScript. En otras palabras, no necesita esperar a que cada navegador admita CSS3 para poder usarlo.
— Dan Blows
Acabo de encontrar esta otra publicación que hace referencia al uso de MS AlphaImageLoader patentado: stackoverflow.com/questions/2991623/…
— uglymunky
17

Usa este CSS:

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

Se explica por 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;
}
— Aamer Shahzad
fuente
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 corrija en todos los dispositivos y navegadores Recomiendo jquery-backstretch.com
— Aamer Shahzad
15

Puede agregar esta clase en 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 posterior
  • Opera 10 o posterior (Opera 9.5 compatible background-size, pero no las palabras clave)
  • Firefox 3.6 o posterior (Firefox 4 es compatible con la versión prefijada de no proveedor)
— Arunraj S
fuente
Esta es una respuesta funcional de "estiramiento para encajar". Nota: la relación de aspecto cambiará.
— devdrc
10

Para escalar sus imágenes adecuadamente según el tamaño del contenedor, use lo siguiente:

background-size: contain;
background-repeat: no-repeat;
— justinpees
fuente
9

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>
— Mahdi jokar
fuente
9

¡Gracias!

Pero entonces no estaba trabajando para el Google Chrome y Safari navegadores (estiramiento funcionado, pero la altura de las imágenes fue sólo 2 mm!) , Hasta que alguien me dijo lo que le falta:

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

Así que cambia eso para 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 mis temas de Drupal Tendustyle.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 Drupal no funciona; uno tiene que cambiar el editor a texto sin formato.

— Cybr
fuente
8

Estoy de acuerdo con la imagen en div absoluta 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 a 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 la user-select:noneregla CSS, de esta manera:

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

Nuevamente, Internet Explorer es el malo aquí, porque no reconoce la opción de selección de 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 imágenes de fondo (por ejemplo, http : //www.felgall.com/jstip35.htm ) o usando el método CSS 3 background-stretch.

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

— Myke Black
fuente
entonces no use img solo un div con bg no debería seleccionarse
— Jacek Pietal
7

Quería centrar y escalar una imagen de fondo, sin extenderla a toda la página, y quería mantener 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%;
}
— AnnieDee
fuente
5

Utilicé una combinación de las propiedades CSS de 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.

— Ryan Den-Kaat
fuente
4

Use el complemento Backstretch . Incluso podría tener varias imágenes de diapositivas. También funciona dentro de contenedores. De esta manera, por ejemplo, se podría cubrir solo una parte del fondo con una imagen de fondo.

Dado que incluso podría hacerlo funcionar, demuestra que es un complemento fácil de usar :).

— Daniel
fuente
3

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.

— Samuel Ramzan
fuente
1

Puede usar la border-image : yourimagepropiedad para escalar la imagen hasta el borde. Incluso si proporciona la imagen de fondo, la imagen del borde se dibujará sobre ella.

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

— Natesh Bhat
fuente
0

¿Quieres lograr esto simplemente usando una imagen? Porque en realidad puedes hacer algo similar 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 el estiramiento dañaría la calidad del fondo. Y si agrega una imagen enorme, ralentizaría la velocidad de las computadoras y los navegadores.

— MarioRicalde
fuente
Buen punto. Pero estoy usando jpg para la imagen de fondo, su tamaño es de aproximadamente 1500x1000, solo toma poco más de 100kb. Pero como lo hiciste?
— Fábio Antunes
1
¿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.
— Fábio Antunes
0

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

— tony2tones
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.