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

Posible duplicado de la imagen de fondo CSS para ajustarse al ancho, la altura debe autoescalar en proporción

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

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

2

Usa este CSS:

background-size: 100% 100%

Sheriff sombrío
fuente

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

Zanshin13

1

@ Zanshin13 No sabía sobre la pregunta anterior. Entonces tienes que votar para cerrar la pregunta, ¡no rechaces mi respuesta!

Shady Sherif

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

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

Respuestas:

HTML

CSS