482 votos

Estirar y ajustar la escala de una imagen CSS en el fondo - con sólo CSS

Quiero que mi imagen de fondo de estiramiento y la escala según el tamaño de la ventana del navegador.

He visto algunas de las preguntas sobre Stack Overflow que hacer el trabajo, como el Estiramiento y la escala de fondo CSS , por ejemplo. Funciona bien, pero quiero colocar la imagen utilizando background, no con un img etiqueta.

En que uno img etiqueta se coloca, y luego con CSS nos homenaje a las img etiqueta.

width:100%; height:100%;

Funciona, pero que pregunta es un poco viejo, y los estados que en CSS 3 cambiar el tamaño de una imagen de fondo funcionará bastante bien. He probado este ejemplo, la primera, pero no funcionó para mí.

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

478voto

Vashishtha Jogi Puntos 2363

CSS3 tiene un bonito y pequeño atributo llamado background-size:cover. Esto no estirar la imagen, pero se va a recortar la imagen en consecuencia.

393voto

Matt Burgess Puntos 3119

Usted podría utilizar la propiedad CSS3 a hacer muy bien. Se redimensiona a la relación así que no hay distorsión de la imagen (aunque no exclusivas imágenes de pequeño tamaño). Sólo tenga en cuenta, no se implementa en todos los navegadores.

background-size: 100%;

163voto

Fábio Antunes Puntos 4232

Mediante el código que 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%;
}

Que produce el efecto deseado: sólo el contenido de desplazamiento, no el fondo.

El fondo de la imagen se redimensiona la ventana del navegador para cualquier tamaño de pantalla. Cuando el contenido no se ajuste a la ventana del navegador, y lo que necesita el usuario para desplazarse por la página, la imagen de fondo permanece fija en la ventanilla, mientras que 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

El siguiente CSS parte debe estirar la imagen con todos los navegadores.

Yo hago esto de forma dinámica para cada página. Por lo tanto puedo usar PHP para generar su propia etiqueta HTML de cada página. Todas las imágenes están en la 'imagen' de la carpeta 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 usted tiene sólo una imagen de fondo para todas las páginas a continuación, puede eliminar el $pic variable, quitar escapar de back-barras, ajustar las rutas y colocar este código en tu 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.

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: