Eu tenho
body {
background: url(images/background.svg);
}
O efeito desejado é que esta imagem de fundo terá largura igual à da página, mudando a altura para manter a proporção. Por exemplo, se a imagem original for 100*200 (qualquer unidade) e o corpo tiver 600px de largura, a imagem de fundo deve acabar tendo uma altura de 1200px. A altura deve mudar automaticamente se a janela for redimensionada. Isto é possível?
Neste momento, o Firefox parece que's faz com que a altura se ajuste e depois ajusta a largura. Será isto talvez porque a altura é a dimensão mais comprida e's a tentar evitar o corte? Eu quero recortar verticalmente, depois pergunto: sem repetição horizontal.
Além disso, Chrome está colocando a imagem no centro, sem repetição, mesmo quando background-repeat:repeat
é dado explicitamente, que é o padrão de qualquer forma.
Existe uma propriedade CSS3 para isto, nomeadamente background-size
(verificação de compatibilidade). Enquanto se pode definir valores de comprimento, it's normalmente utilizados com os valores especiais contain
e cover
. No seu caso específico, você deve utilizar cover
:
body {
background-image: url(images/background.svg);
background-size: cover; /* <------ */
background-repeat: no-repeat;
background-position: center center; /* optional, center the image */
}
Desculpe pelo trocadilho mau, mas eu'vou usar a foto do dia por Biswarup Ganguly para demonstração. Vamos dizer que esta é a sua tela, e a área cinza está fora da sua tela visível. Para demonstração, I'm vai assumir uma proporção de 16x9.
Queremos usar a imagem do dia acima mencionada como fundo. No entanto, nós cortamos a imagem para 4x3 por alguma razão. Poderíamos definir a propriedade "tamanho de fundo" para algum comprimento fixo, mas vamos focar em "conter" e "cobrir". Note que eu também assumo que nós'não alteramos a largura e/ou altura do corpo
.
contém
conter escalar a imagem, preservando a sua relação de aspecto intrínseco (se houver), para o maior tamanho, de modo a que tanto a sua largura como a sua altura possam caber dentro da área de posicionamento do fundo.
Isto garante que a imagem de fundo esteja sempre completamente contida na área de posicionamento de fundo, no entanto, pode haver algum espaço vazio preenchido com a sua "cor de fundo" neste caso:
capa
cobertura escalar a imagem, preservando a sua relação de aspecto intrínseco (se houver), para o menor tamanho possível, de modo que tanto a sua largura como a sua altura possam cobrir completamente a área de posicionamento do fundo.
Isto assegura que a imagem de fundo está a cobrir tudo. Não haverá nenhuma "cor de fundo" visível, no entanto, dependendo da proporção da tela's, uma grande parte da sua imagem pode ser cortada:
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>
Com base em dicas do https://developer.mozilla.org/en-US/docs/CSS/background-size acabei 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;
}
I'não tenho certeza do que você'está procurando exatamente, mas você realmente deveria conferir estes excelentes posts de blog escritos por Chris Coyier da 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.
A primeira responde à seguinte pergunta:
Há alguma forma de tornar uma imagem de fundo redimensionável? Como em, preencha o fundo de uma página web de ponta a ponta com uma imagem, não importa o tamanho da janela do navegador. Além disso, faça com que ela redimensione maior ou menor à medida que a janela do navegador muda. Além disso, certifique-se de manter a proporção (doesn't stretch weird). Além disso, doesn't cause barras de rolagem, apenas corte verticalmente se for necessário. Além disso, vem na página como um inline tag.
O segundo post's objetivo é obter o seguinte, um "imagem de fundo em um site que cobre toda a janela do navegador o tempo todo. "
Espero que isto ajude.