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 contain
e 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 contain
ecover
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-size
propriedade para um comprimento fixo, mas focaremos em contain
e 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-color
neste 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><div></code>.</p>
</div>
html, body { height: 100%; }
ajuda? Além disso, tosse .