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


365

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.


2
Será que html, body { height: 100%; }ajuda? Além disso, tosse .
thirtydot

ele não funciona no chrome google
simon

Respostas:


810

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.

tela

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:

conter

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:

cobrir

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>


É exatamente isso que eu quero, obrigado. Parece que não funciona no Chrome (ou no Chromium, pelo menos) - você tem alguma idéia brilhante?
spraff

De acordo com quirksmode.org/css/contents.html#t44, ele deve funcionar no Chrome sem nenhum prefixo. No entanto, você já tentou o -webkit-prefixo?
Zeta

4
A resposta de Yauhen (na parte inferior desta página) era realmente o que eu estava procurando:background-size: contain
Danny Beckett

11
@DannyBeckett: Embora isso seja possível, não é o que o OP estava procurando: "Quero cortar verticalmente e depois rolar: sem repetição horizontal".
Zeta

3
containé como ajuste de zoom. coveré como preenchimento de zoom. containajusta o tamanho da imagem para corresponder à dimensão maior entre largura e altura. coverajusta o tamanho da imagem para corresponder à menor dimensão entre largura e altura.
Ahnbizcad

39

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

3
Embora eu tenha usado background-position: center;, isso funcionou melhor para mim do que backgound-size: cover;.
Nate

Posso saber por que precisamos da overflow-y: hiddenpeça?
Nam G VU

11

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.


8

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


7

Tente isso,

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


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

12
descreva qual é exatamente o problema e como você o soluciona, não cole um monte de código aqui sem explicação.
Siavash

2

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;



-3

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.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.