Esticar e dimensionar uma imagem CSS em segundo plano – somente com CSS

Eu quero que minha imagem de fundo esticar e escalar dependendo do tamanho do viewport do navegador.

Eu já vi algumas perguntas no Stack Overflow que fazem o trabalho, como o Stretch e escalonar o plano de fundo do CSS, por exemplo. Funciona bem, mas quero colocar a imagem usando background , não com uma tag img .

Nessa, uma tag img é colocada e, em seguida, com CSS, nós tributo a tag img .

 width:100%; height:100%; 

Isso funciona, mas essa questão é um pouco antiga e afirma que no CSS 3 o redimensionamento de uma imagem de segundo plano funcionará muito bem. Eu tentei este exemplo o primeiro , mas não deu certo para mim.

Existe um bom método para fazer isso com a declaração de background-image ?

O CSS3 tem um pequeno atributo chamado background-size:cover .

Isso dimensiona a imagem para que a área de fundo seja completamente coberta pela imagem de fundo, mantendo a proporção. Toda a área será coberta, mas parte da imagem pode não ser visível se a largura / altura da imagem redimensionada for muito grande

Você poderia usar a propriedade CSS3 para fazer isso muito bem. Ela é redimensionada para a taxa, de modo que não há distorção da imagem (embora ela ofereça imagens pequenas e sofisticadas). Apenas observe, ele não está implementado em todos os navegadores ainda.

 background-size: 100%; 

Usando o código que eu mencionei …

HTML

 

CSS

 #background { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */ } .stretch { width:100%; height:100%; } 

Isso produz o efeito desejado: somente o conteúdo rolará, não o plano de fundo.

A imagem de fundo é redimensionada para a porta de visualização do navegador para qualquer tamanho de canvas. Quando o conteúdo não se ajusta à viewport do navegador e o usuário precisa rolar a página, a imagem de plano de fundo permanece fixa na viewport enquanto o conteúdo rola.

Com o CSS 3, parece que isso seria muito mais fácil.

CSS:

 html,body { background: url(images/https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; /* For WebKit*/ -moz-background-size: cover; /* Mozilla*/ -o-background-size: cover; /* Opera*/ background-size: cover; /* Generic*/ } 
 background-size: 100% 100%; 

estica bg para preencher o elemento inteiro em ambos os eixos

A parte CSS a seguir deve esticar a imagem em todos os navegadores.

Eu faço isso dinamicamente para cada página. Portanto, eu uso o PHP para gerar sua própria tag HTML para cada página. Todas as imagens estão na pasta ‘image’ e terminam com ‘Bg.jpg’.

  

Se você tem apenas uma imagem de fundo para todas as páginas, então você pode remover a variável $pic , remover barras invertidas, ajustar caminhos e colocar este código no seu arquivo CSS.

 html{ background: url(images/homeBg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg.jpg', sizingMethod='scale'); -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/homeBg', sizingMethod='scale'); } 

Isso foi testado com o Internet Explorer 9, Chrome 21 e Firefox 14.

Use este CSS:

 background: url('img.png') no-repeat; background-size: 100%; 

Você pode realmente conseguir o mesmo efeito que uma imagem de fundo com a tag img. Você só precisa definir seu z-index mais baixo que tudo, definir position: absolute e usar um background transparente para cada box no primeiro plano.

Você pode adicionar essa class ao seu arquivo CSS.

 .stretch { background: url(images/https://stackoverflow.com/questions/1150163/stretch-and-scale-a-css-image-in-the-background-with-css-only/bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Trabalha em:

  • Safari 3 ou posterior
  • Chrome Seja qual for ou mais tarde
  • Internet Explorer 9 ou posterior
  • Opera 10 ou posterior (o Opera 9.5 suportava background-size , mas não as palavras-chave)
  • Firefox 3.6 ou posterior (o Firefox 4 suporta a versão prefixada de não fornecedor)

Explained by css-tricks https://css-tricks.com/perfect-full-page-background-image/

demonstração: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

código:

 body { background: url(images/myBackground.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

Para dimensionar suas imagens adequadamente com base no tamanho do contêiner, é o seguinte:

 { background-size:contain; background-repeat: no-repeat; } 

Eu uso isso e funciona com todos os navegadores:

   Stretched Background Image      
Smile

Stretch that Background Image!

This text appears in front of the background image. This is because we've used CSS to layer the content in front of the background image. The background image will stretch to fit your browser window. You can see the image grow and shrink as you resize your browser.

Go on, try it - resize your browser!

Concordo com a imagem em div absoluta com 100% de largura e altura. Certifique-se de definir 100% de largura e altura para o corpo no CSS e defina as margens e o preenchimento como zero. Outra questão que você encontrará com este método é que ao selecionar o texto, a área de seleção pode às vezes abranger a imagem de fundo, o que tem o efeito infeliz de fazer com que a página inteira tenha o estado selecionado. Você pode contornar isso usando a regra de CSS de user-select:none do user-select:none , assim:

      
content here

Novamente, o Internet Explorer é o vilão aqui, porque não reconhece a opção de seleção do usuário – nem mesmo a visualização do Internet Explorer 10 oferece suporte, portanto, você tem a opção de usar JavaScript para impedir a seleção da imagem de fundo (por exemplo, http : //www.felgall.com/jstip35.htm ) ou usando o método CSS -background-stretch.

Além disso, para SEO eu colocaria a imagem de fundo na parte inferior da página, mas se a imagem de fundo demorar muito para carregar (ou seja, com um fundo branco inicialmente), você poderia ir para o topo da página.

Obrigado!

Mas então não estava funcionando para os navegadores Google Chrome e Safari (o alongamento funcionou, mas a altura das fotos era de apenas 2 mm!) , Até que alguém me disse o que não tem:

Tente definir a height:auto;min-height:100%;

Então mude isso para a sua height:100%; linha, dá:

 #### #background { width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; } .stretch { width:100%; height:auto; min-height:100%; } 

Pouco antes desse código recém-adicionado eu tenho isso em meus temas do Drupal Tendu style.css :

html, body {height: 100%;}

#page {background: #ffffff; altura: auto! importante; altura: 100%; min-altura: 100%; posição: relativa;}

Então eu tenho que fazer um novo bloco dentro do Drupal com a imagem ao adicionar class=stretch :

Apenas copiar uma imagem com o editor nesse bloco do Drupal não funciona; é preciso mudar o editor para texto não formatado.

Eu queria centralizar e dimensionar uma imagem de plano de fundo, sem esticá-la para toda a página, e queria que a proporção fosse mantida. Isso funcionou para mim, graças às variações sugeridas em outras respostas:

IMAGEM EM LINHA: ————————

 

CSS ———————————-

 html { height:100%; } #background { text-align: center; width: 100%; height: 100%; position: fixed; left: 0px; top: 0px; z-index: -1; } .stretch { margin: auto; height:100%; } 

Use o plugin Backstretch . Pode-se até ter várias imagens. Também funciona dentro de contêineres. Desta forma, por exemplo, pode-se ter apenas uma parte do fundo coberta com uma imagem de fundo.

Já que até eu consegui fazê-lo funcionar, é fácil usar o plugin :).

Você pode usar a propriedade border-image : yourimage para dimensionar a imagem até a borda. Mesmo que você forneça a imagem de plano de fundo, a imagem da borda será desenhada sobre ela.

A propriedade border-image é muito útil se sua folha de estilo for implementada em algum lugar que não suporte CSS3. Se você está usando o chrome do firefox, então eu recomendo a propriedade background-size:cover .

Você quer conseguir isso usando apenas uma imagem? Porque você pode realmente fazer um pouco semelhante a um fundo de alongamento usando duas imagens. Imagens PNG, por exemplo.

Eu fiz isso antes, e não é tão difícil. Além disso, acho que o alongamento apenas prejudicaria a qualidade do cenário. E se você adicionar uma imagem enorme, ela diminuiria a velocidade de computadores e navegadores.