Quero que minha imagem de plano de fundo seja ampliada e dimensionada, dependendo do tamanho da janela de exibição do navegador.
Eu já vi algumas perguntas no Stack Overflow que fazem o trabalho, como Expandir e dimensionar o fundo do CSS, por exemplo. Funciona bem, mas quero colocar a imagem usando background
, não com uma img
tag.
Nesse, uma img
tag é colocada e, em seguida, com CSS, fazemos uma homenagem à img
tag.
width:100%; height:100%;
Funciona, mas essa pergunta é um pouco antiga e afirma que no CSS 3 o redimensionamento de uma imagem de plano de fundo 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 background-image
declaração?
css
background
Fábio Antunes
fonte
fonte
Respostas:
CSS3 tem um pequeno atributo chamado
background-size:cover
.Isso dimensiona a imagem para que a área de fundo fique completamente coberta pela imagem de fundo, mantendo a proporção da imagem. Toda a área será coberta. No entanto, parte da imagem pode não estar visível se a largura / altura da imagem redimensionada for muito grande.
fonte
background-size: 100vw 100vh;
faz o truque bem.background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
background-size: 100% auto;
stackoverflow.com/questions/41025630/...Você pode usar a propriedade CSS3 para fazer isso muito bem. Ele é redimensionado para a proporção, sem distorção da imagem (apesar de melhorar imagens pequenas). Observe que ainda não foi implementado em todos os navegadores.
fonte
background-image
inclua a propriedade acima. Como mencionado, o suporte ao navegador ainda não é bom e existem versões específicas do navegador, isto é.-webkit-background-size
etc. Veja o Módulo W3C CSS3: background-size e css3.info: background-sizeauto
para preservar a proporção.Usando o código que eu mencionei ...
HTML
CSS
Isso produz o efeito desejado: apenas o conteúdo será rolado, não o plano de fundo.
A imagem de fundo é redimensionada para a janela de exibição do navegador para qualquer tamanho de tela. Quando o conteúdo não se encaixa na janela de exibição do navegador e o usuário precisa rolar a página, a imagem de plano de fundo permanece fixa na janela de visualização enquanto o conteúdo rola.
Com o CSS 3, parece que isso seria muito mais fácil.
fonte
background : url("example.png");
) e, em seguida, usar o atributo cssbackground-size:100%;
abaixo dele para escalar a imagem para a largura da tela. Isso não vai funcionar, certo? Se você deseja colocar uma imagem de plano de fundo para o corpo, um atributo de imagem deve ser adicionado à tag body, como<body background="example.png">
. Em seguida, use cssbackground-size:100%;
para escalá-lo.CSS:
fonte
html, body {...}
vez debody {...}
.estica o plano de fundo para preencher todo o elemento nos dois eixos.
fonte
A parte CSS a seguir deve esticar a imagem com 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 'imagem' e terminam com 'Bg.jpg'.
Se você tiver apenas uma imagem de plano de fundo para todas as páginas, poderá remover a
$pic
variável, remover as barras invertidas, ajustar os caminhos e colocar esse código no seu arquivo CSS.Isso foi testado com Internet Explorer 9, Chrome 21 e Firefox 14.
fonte
-webkit-background-size
,-moz-background-size
e assim por diante. Veja developer.mozilla.org/en-US/docs/CSS/... Ou você vai para incluí-lo à prova de futuro na propriedade estenográfica comobackground: url(img/bg-home.jpg) no-repeat center center / cover fixed;
Você pode realmente obter o mesmo efeito que uma imagem de plano de fundo com a tag img. Você só precisa definir o índice z abaixo de tudo, definir a posição: absoluto e usar um plano de fundo transparente para todas as caixas em primeiro plano.
fonte
Use este CSS:
fonte
É explicado por truques CSS: Imagem de fundo perfeita de página inteira
Demonstração: https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php
Código:
fonte
Você pode adicionar esta classe ao seu arquivo CSS.
Funciona em:
background-size
, mas não as palavras-chave)fonte
Para dimensionar suas imagens adequadamente com base no tamanho do contêiner, use o seguinte:
fonte
Eu uso isso e funciona com todos os navegadores:
fonte
Obrigado!
Mas então ele não estava trabalhando para o Google Chrome e Safari navegadores (alongamento funcionou, mas a altura das imagens foi de apenas dois milimetros!) , Até que alguém me disse que o que falta:
Então mude isso para sua
height:100%;
linha, dê:Pouco antes desse código recém-adicionado, eu tenho isso nos meus temas do Drupal Tendu
style.css
: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 Drupal não funciona; é preciso alterar o editor para texto não formatado.
fonte
Concordo com a imagem em div absoluto com 100% de largura e altura. Defina 100% de largura e altura para o corpo no CSS e defina margens e preenchimento como zero. Outro problema que você encontrará com esse método é que, ao selecionar texto, a área de seleção às vezes pode abranger a imagem de plano de fundo, que tem o efeito infeliz de fazer com que a página inteira tenha o estado selecionado. Você pode contornar isso usando a
user-select:none
regra CSS, assim:Mais uma vez, 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 suporta, portanto você tem a opção de usar JavaScript para impedir a seleção da imagem de plano de fundo (por exemplo, http : //www.felgall.com/jstip35.htm ) ou usando o método CSS 3 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ê poderá mover para o topo da página.
fonte
Eu queria centralizar e dimensionar uma imagem de fundo, sem esticá-la para a página inteira, 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 ----------------------------------
fonte
Usei uma combinação das propriedades CSS background-X para obter a imagem de fundo ideal de escala.
Isso faz com que o plano de fundo sempre cubra toda a janela do navegador e permaneça centralizado ao dimensionar.
fonte
Use o plug-in Backstretch . Pode-se até ter várias imagens de slides. Também funciona dentro de contêineres. Dessa forma, por exemplo, só é possível cobrir uma parte do plano de fundo com uma imagem de plano de fundo.
Como até eu consegui fazê-lo funcionar, é um plugin fácil de usar :).
fonte
Se você deseja que o conteúdo seja centralizado horizontalmente, use uma combinação como esta:
Isso ficará lindo.
fonte
Use este CSS:
background-size: 100% 100%
fonte
Você pode usar o
border-image : yourimage
propriedade para dimensionar a imagem até a borda. Mesmo se você der a imagem de fundo, a imagem da borda será desenhada sobre ela.A
border-image
propriedade é muito útil se sua folha de estilos for implementada em algum lugar que não suporte CSS 3. Se você estiver usando o Google Chrome ou Firefox, recomendo abackground-size:cover
propriedade.fonte
Deseja conseguir isso usando apenas uma imagem? Porque você pode realmente fazer algo parecido com um fundo de alongamento usando duas imagens. Imagens PNG, por exemplo.
Eu já fiz isso antes, e não é tão difícil. Além disso, acho que o alongamento prejudicaria a qualidade do plano de fundo. E se você adicionar uma imagem grande, ela desacelerará os computadores e navegadores.
fonte
O seguinte funcionou para mim.
que trabalhou para cobrir todo o plano de fundo em diferentes dimensões
fonte