Imagen de fondo CSS para ajustarse al ancho, la altura debe escalar automáticamente en proporción

yo tengo

body {
    background: url(images/background.svg);
}

El efecto deseado es que esta imagen de fondo tendrá un ancho igual al de la página, cambiando la altura para mantener la proporción. por ejemplo, si la imagen original es de 100 * 200 (cualquier unidad) y el cuerpo tiene 600px de ancho, la imagen de fondo debería terminar siendo 1200px de alto. La altura debería cambiar automáticamente si la ventana cambia de tamaño. es posible?

Por el momento, parece que Firefox está ajustando la altura y luego ajustando el ancho. ¿Es esto quizás porque la altura es la dimensión más larga y está tratando de evitar el recorte? Yo quiero para recortar verticalmente, luego de desplazamiento: no repetición horizontal.

Además, Chrome está colocando la imagen en el centro, sin repetición, incluso cuando background-repeat:repeatse proporciona explícitamente, que es el valor predeterminado de todos modos.

Hay una propiedad CSS3 para esto, a saber background-size( verificación de compatibilidad ). Si bien uno puede establecer valores de longitud, generalmente se usa con los valores especiales containy cover. En su caso específico, debe usar cover:

body {
    background-image:    url(images/background.svg);
    background-size:     cover;                      /* <------ */
    background-repeat:   no-repeat;
    background-position: center center;              /* optional, center the image */
}

Explicación de huevos para containycover

Perdón por el mal juego de palabras, pero voy a usar la imagen del día de Biswarup Ganguly para la demostración. Digamos que esta es su pantalla, y el área gris está fuera de su pantalla visible. Para demostración, voy a asumir una relación de 16x9.

Queremos utilizar la imagen del día antes mencionada como fondo. Sin embargo, recortamos la imagen a 4x3 por alguna razón. Podríamos establecer la background-sizepropiedad en una longitud fija, pero nos centraremos en containy cover. Tenga en cuenta que también asumo que no destrozamos el ancho y / o la altura de body.

contain

contain

Escale la imagen, conservando su relación de aspecto intrínseca (si existe), al tamaño más grande, de modo que tanto su ancho como su altura puedan caber dentro del área de posicionamiento del fondo.

Esto asegura que la imagen de fondo siempre esté completamente contenida en el área de posicionamiento de fondo, sin embargo, podría haber algún espacio vacío lleno en su background-colorcaso:

cover

cover

Escale la imagen, conservando su relación de aspecto intrínseca (si existe), al tamaño más pequeño, de modo que tanto su ancho como su altura puedan cubrir completamente el área de posicionamiento del fondo.

Esto asegura que la imagen de fondo cubra todo. No habrá visible background-color, sin embargo, dependiendo de la proporción de la pantalla, una gran parte de su imagen podría cortarse:

Demostración con código real

div > div {
  background-image: url(http://i.stack.imgur.com/r5CAq.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-color: #ccc;
  border: 1px solid;
  width: 20em;
  height: 10em;
}
div.contain {
  background-size: contain;
}
div.cover {
  background-size: cover;
}
/********************************************
 Additional styles for the explanation boxes 
*********************************************/

div > div {
  margin: 0 1ex 1ex 0;
  float: left;
}
div + div {
  clear: both;
  border-top: 1px dashed silver;
  padding-top:1ex;
}
div > div::after {
  background-color: #000;
  color: #fefefe;
  margin: 1ex;
  padding: 1ex;
  opacity: 0.8;
  display: block;
  width: 10ex;
  font-size: 0.7em;
  content: attr(class);
}

<div>
  <div class="contain"></div>
  <p>Note the grey background. The image does not cover the whole region, but it's fully <em>contained</em>.
  </p>
</div>
<div>
  <div class="cover"></div>
  <p>Note the ducks/geese at the bottom of the image. Most of the water is cut, as well as a part of the sky. You don't see the complete image anymore, but neither do you see any background color; the image <em>covers</em> all of the <code>&lt;div&gt;</code>.</p>
</div>

Basado en consejos de https://developer.mozilla.org/en-US/docs/CSS/background-size termino con la siguiente receta que funcionó para mí

body {
        overflow-y: hidden ! important;
        overflow-x: hidden ! important;
        background-color: #f8f8f8;
        background-image: url('index.png');
        /*background-size: cover;*/
        background-size: contain;
        background-repeat: no-repeat;
        background-position: right;
}

No estoy seguro de lo que está buscando exactamente, pero realmente debería consultar estas excelentes publicaciones de blog escritas por Chris Coyier de CSS-Tricks:

http://css-tricks.com/how-to-resizeable-background-image/

http://css-tricks.com/perfect-full-page-background-image/

Lea las descripciones de cada uno de los artículos y vea si son lo que está buscando.

El primero responde a la siguiente pregunta:

¿Hay alguna manera de hacer que una imagen de fondo sea redimensionable? Como en, llene el fondo de una página web de borde a borde con una imagen, sin importar el tamaño de la ventana del navegador. Además, haga que cambie de tamaño más o menos a medida que cambie la ventana del navegador. Además, asegúrese de que conserve su proporción (no se estira de manera extraña). Además, no causa barras de desplazamiento, solo se corta verticalmente si es necesario. Además, aparece en la página como una etiqueta en línea.

El objetivo de la segunda publicación es obtener lo siguiente, una "imagen de fondo en un sitio web que cubra toda la ventana del navegador en todo momento".

Espero que esto ayude.

La imagen de fondo no se establece como perfecta, entonces su CSS es un problema para crear, por lo que su archivo CSS cambia al código siguiente

html {  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-position: 0% 0%;
  background-size: 100% 100%;
}

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

Prueba esto,

element.style {
    background: rgba(0, 0, 0, 0) url("img/shopping_bgImg.jpg") no-repeat scroll center center / cover;
}

Solo agregue esta línea:

    .your-class {
        height: 100vh;
    }

vh es la altura de la ventana gráfica. Esto se escalará automáticamente para adaptarse a la ventana del navegador del dispositivo.

Verifique más aquí: haga que el div tenga una altura del 100% de la ventana del navegador

body{
    background-image: url(../url/imageName.jpg);
    background-attachment: fixed;
    background-size: auto 100%;
    background-position: center;
}

Tuve el mismo problema, no pude cambiar el tamaño de la imagen al ajustar las dimensiones del navegador.

Código malo

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
}

Buen código:

html {  
  background-color: white;  
  background-image: url("example.png");  
  background-repeat: no-repeat;  
  background-attachment: scroll;  
  background-position: 0% 0%;
  background-size: contain;
}

La clave aquí es la adición de este elemento -> background-size: contener;

Esto es lo que funcionó para mí:

background-size: auto 100%;

Establecer el tamaño de fondo no ayuda, la siguiente solución funcionó para mí:

.class {
    background-image: url(blablabla.jpg);
    /* Add this */
    height: auto;
}

Básicamente recorta la imagen y la hace encajar, background-size: contain/covertodavía no la hizo encajar.