Imagem de plano de fundo CSS para ajustar a largura, a altura deve ser dimensionada automaticamente na proporção

eu tenho

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

O efeito desejado é que essa imagem de plano de fundo tenha largura igual à da página, mudando a altura para manter a proporção. por exemplo, se a imagem original tiver 100 * 200 (qualquer unidade) e o corpo tiver 600px de largura, a imagem de plano de fundo deverá ter 1200px de altura. A altura deve mudar automaticamente se a janela for redimensionada. Isso é possível?

No momento, parece que o Firefox está ajustando a altura e ajustando a largura. Talvez seja porque a altura é a dimensão mais longa e está tentando evitar o corte? Eu quero cortar verticalmente, em seguida, rolagem: nenhuma repetição horizontal.

Além disso, o Chrome está colocando a imagem no centro, sem repetição, mesmo quando background-repeat:repeatfornecida explicitamente, que é o padrão de qualquer maneira.

Existe uma propriedade CSS3 para isso, a saber background-size( verificação de compatibilidade ). Embora se possa definir valores de comprimento, geralmente é usado com os valores especiais containe cover. No seu caso específico, você deve usar cover:

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

Eggsplanation para containecover

Desculpe pelo trocadilho, mas vou usar a foto do dia de Biswarup Ganguly para demonstração. Digamos que essa seja sua tela e a área cinza fique fora da tela visível. Para demonstração, vou assumir uma proporção de 16x9.

Queremos usar a imagem do dia acima mencionada como pano de fundo. No entanto, cortamos a imagem para 4x3 por algum motivo. Poderíamos definir a background-sizepropriedade para um comprimento fixo, mas focaremos em containe cover. Observe que também presumo que não alteramos a largura e / ou a altura de body.

contain

contain

Dimensione a imagem, preservando sua proporção intrínseca (se houver), para o tamanho maior, de forma que a largura e a altura possam caber dentro da área de posicionamento do plano de fundo.

Isso garante que a imagem de plano de fundo esteja sempre completamente contida na área de posicionamento de plano de fundo; no entanto, pode haver algum espaço vazio preenchido com o seu background-colorneste caso:

cover

cover

Escale a imagem, preservando sua proporção intrínseca (se houver), para o menor tamanho, de modo que sua largura e altura possam cobrir completamente a área de posicionamento do plano de fundo.

Isso garante que a imagem de plano de fundo cubra tudo. Não haverá visibilidade background-color, no entanto, dependendo da proporção da tela, grande parte da sua imagem pode ser cortada:

Demonstração com 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>

Com base nas dicas de https://developer.mozilla.org/pt-BR/docs/CSS/background-size , termino com a seguinte receita que funcionou para mim

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

Não tenho certeza do que você está procurando exatamente, mas você realmente deve conferir essas excelentes postagens de blog escritas por Chris Coyier do CSS-Tricks:

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

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

Leia as descrições de cada um dos artigos e veja se eles são o que você está procurando.

O primeiro responde à seguinte pergunta:

Existe uma maneira de tornar uma imagem de fundo redimensionável? Por exemplo, preencha o plano de fundo de uma página da Web de ponta a ponta com uma imagem, independentemente do tamanho da janela do navegador. Além disso, redimensione maior ou menor conforme a janela do navegador muda. Além disso, verifique se ele mantém sua proporção (não se estica de maneira estranha). Além disso, não causa barras de rolagem, apenas corta verticalmente, se necessário. Além disso, entra na página como uma tag embutida.

O objetivo da segunda postagem é obter o seguinte, uma "imagem de plano de fundo em um site que cubra a janela inteira do navegador o tempo todo".

Espero que isto ajude.

A imagem de plano de fundo não é Definida como perfeita, então seu css é problema ao criar, portanto seu arquivo css muda para o código abaixo

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

%; tamanho do plano de fundo: 100% 100%; "

Tente isso,

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

Basta adicionar esta linha:

    .your-class {
        height: 100vh;
    }

vh é a altura da janela de exibição. Isso será dimensionado automaticamente para caber na janela do navegador do dispositivo.

Confira mais aqui: Faça div 100% da altura da janela do navegador

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

Eu tive o mesmo problema, incapaz de redimensionar a imagem ao ajustar as dimensões do navegador.

Código incorreto:

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

Código bom:

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

A chave aqui é a adição deste elemento -> background-size: contains;

Aqui está o que funcionou para mim:

background-size: auto 100%;

Definir o tamanho do plano de fundo não ajuda, a seguinte solução funcionou para mim:

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

Basicamente, a imagem é cortada e ajustada, background-size: contain/coverainda não ajustada.