482 votos

Estirar y escalar una imagen CSS en el fondo - sólo con CSS

Quiero que mi imagen de fondo se estire y escale en función del tamaño de la ventana gráfica 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 esa una img y luego con el CSS se tributa a la etiqueta img etiqueta.

width:100%; height:100%;

Funciona, pero esa pregunta es un poco antigua, y afirma que en CSS 3 el cambio de tamaño de una imagen de fondo funciona bastante bien. He probado esto ejemplo el primero pero no me funcionó.

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

478voto

Vashishtha Jogi Puntos 2363

CSS3 tiene un pequeño atributo llamado background-size:cover . Esto no estira la imagen, pero la recortará en consecuencia.

393voto

Matt Burgess Puntos 3119

Puedes usar la propiedad CSS3 para hacerlo bastante bien. Cambia el tamaño a la proporción, así que no hay distorsión de la imagen (aunque sí aumenta la escala de las imágenes pequeñas). Pero ten en cuenta que aún no está implementada en todos los navegadores.

background-size: 100%;

163voto

Fábio Antunes Puntos 4232

Utilizando el código He mencionado...

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

Esto produce el efecto deseado: sólo el contenido se desplazará, no el fondo.

La imagen de fondo se ajusta a la ventana gráfica 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 el contenido se desplaza.

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

122voto

Andaero Puntos 3319

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

34voto

Thorsten Niehues Puntos 1167

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

Lo hago de forma dinámica 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 'image' 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 sólo tiene una imagen de fondo para todas las páginas, puede eliminar el $pic eliminar las barras invertidas, 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');
}

Se ha probado con Internet Explorer 9, Chrome 21 y Firefox 14.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X