Amplie e dimensione uma imagem CSS em segundo plano - apenas com CSS

853

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 imgtag.

Nesse, uma imgtag é colocada e, em seguida, com CSS, fazemos uma homenagem à imgtag.

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-imagedeclaração?

css  background 
— Fábio Antunes
fonte
113
tamanho do plano de fundo: 100% 100%;
— Andreas L.
5
Talvez esta demonstração possa ser útil: w3schools.com/cssref/…
— Davide
1
— Alex Angas
@AlexAngas A idade da pergunta não deveria ser um fator? Esta foi feita há 6 anos e a pergunta que você apontou foi feita há 4 anos.
— Fábio Antunes
@ FábioAntunes IMHO, não queremos encerrar a pergunta com as melhores respostas e, em vez disso, incentivar duplicatas a vincular-se a ela. Estou certo de que este teria sido discutido em Meta, mas não posso encontrá-lo agora ...
— Alex Angas

Respostas:

1047

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.

— Vashishtha Jogi
fonte
11
A capa recorta a imagem se a proporção não corresponder, portanto, não é uma boa solução geral.
— mahemoff
1
caso você queira que ele funcione nos navegadores IE - github.com/louisremi/background-size-polyfill
— Wreeecks
4
Parece não funcionar no Firefox. No entanto, background-size: 100vw 100vh;faz o truque bem.
— Yannick Mauray
5
@YannickMauray try: background-size: cover; -ms-background-size: cover; -o-background-size: cover; -moz-background-size: cover; -webkit-background-size: cover;
— Amit Kumar Khare
2
Se você quer isso, mas apenas para o eixo horizontal, use este: background-size: 100% auto; stackoverflow.com/questions/41025630/...
— antoineMoPa
470

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.

background-size: 100%;
— Matt Burgess
fonte
19
@nXqd Esse é praticamente o código completo! Crie um contêiner com ae background-imageinclua a propriedade acima. Como mencionado, o suporte ao navegador ainda não é bom e existem versões específicas do navegador, isto é. -webkit-background-sizeetc. Veja o Módulo W3C CSS3: background-size e css3.info: background-size
— MrWhite
15
Para preservar a proporção da imagem, use "background-size: cover;" ou "tamanho do plano de fundo: contém;". Eu construí um polyfill que implementa esses valores em IE8: github.com/louisremi/background-size-polyfill
— Louis-Rémi
4
Também é aconselhável adicionar autopara preservar a proporção.
— Chibueze Opata
186

Usando o código que eu mencionei ...

HTML

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

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: 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.

— Fábio Antunes
fonte
12
Mas isso não é imagem de fundo. Você pode fazer isso apenas em um bloco, mas não em um elemento embutido, como uma entrada [type = text]. Ou eu estou errado?
— precisa saber é o seguinte
11
há necessidade do class = "esticar", basta usar img #background {} como identificador no css
— BerggreenDK
índice z: -1; mantém sua imagem em segundo plano. Se você deseja mostrar sua imagem em primeiro plano, você pode aumentar o valor do índice z ou remover esse índice.
— Gokhanakkurt # 7/13
O problema que estou tendo é com o IE8. A imagem de plano de fundo de um DIV se estende por completo, mas no IE8 as imagens ficam fora do DIV, portanto, não sendo possível ver a imagem completa. Ele é cortado. Aqui está a minha pergunta: stackoverflow.com/questions/22331179/...
— Si8
1
O erro óbvio que as pessoas cometem é colocar a imagem de plano de fundo no css (ou seja, por background : url("example.png");) e, em seguida, usar o atributo css background-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 css background-size:100%;para escalá-lo.
— Sjsam
166

CSS:

html,body {
    background: url(images/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*/
}
— Josh Crozier
fonte
No entanto, isso não funciona no IE8. Ele cria uma margem na parte superior e inferior da janela.
— erdomester
No Android, ele funcionou ao usar em html, body {...}vez de body {...}.
— Edward
53 
background-size: 100% 100%;

estica o plano de fundo para preencher todo o elemento nos dois eixos.

— yeahdixon
fonte
40

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'.

<html style="
      background: url(images/'.$pic.'Bg.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/'.$pic.'Bg.jpg\',     sizingMethod=\'scale\');
      -ms-filter: \"progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'images/'.$pic.'Bg.jpg\', sizingMethod=\'scale\')\
";>

Se você tiver apenas uma imagem de plano de fundo para todas as páginas, poderá remover a $picvariável, remover as barras invertidas, ajustar os caminhos e colocar esse 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 Internet Explorer 9, Chrome 21 e Firefox 14.

— Thorsten Niehues
fonte
2
Seu exemplo não funciona no sentido de compatibilidade com versões anteriores, porque você simplesmente esqueceu os principais '-' dos prefixos de fornecedores. Deve ser -webkit-background-size, -moz-background-sizee 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;
— Volker E.
Esta foi a única solução que funcionaria para mim no IE9. Obrigado.
— robnick
17

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.

— Kim Stebel
fonte
Isso é o que eu vi em outras perguntas e funciona, mas desde o lançamento do CSS3, pensei que agora era uma maneira melhor de fazê-lo.
— Fábio Antunes
3
Pode haver, e levando em consideração a evolução do uso do navegador, você poderá usá-los comercialmente em apenas ... 10 anos?
— 22415 Kim Stebel
Sendo CSS3, não há nada de errado em usar uma propriedade que os navegadores mais modernos veem e fornecer um padrão mínimo para navegadores não suportados. Aqui, por exemplo, você pode usar um fundo em mosaico chato, mas aceitável, para o <IE8 e uma imagem adorável para Firefox / Chrome / Safari / Opera. Além disso, existem muitos polyfills para replicar a funcionalidade CSS3 em navegadores mais antigos com JavaScript. Em outras palavras, você não precisa esperar que todos os navegadores suportem CSS3 para usá-lo.
— Dan Blows
Acabei de encontrar este outro post que referencia o uso do proprietário do MS AlphaImageLoader: stackoverflow.com/questions/2991623/…
— #
17

Use este CSS:

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

É explicado por truques CSS: Imagem de fundo perfeita de página inteira

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;
}
— Aamer Shahzad
fonte
Com base na resposta acima, vi a correção de anexo em segundo plano não funcionar em dispositivos móveis e no Microsoft Edge. A solução perfeita para fazer trecho de fundo e correção em todos os dispositivos e navegadores que eu recomendo jquery-backstretch.com
— Aamer Shahzad
15

Você pode adicionar esta classe ao seu arquivo CSS.

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

Funciona em:

  • Safari 3 ou posterior
  • Chrome Seja qual for ou mais tarde
  • Internet Explorer 9 ou posterior
  • Opera 10 ou posterior (Opera 9.5 suportado background-size, mas não as palavras-chave)
  • Firefox 3.6 ou posterior (o Firefox 4 suporta a versão prefixada por não fornecedor)
— Arunraj S
fonte
Esta é uma resposta "esticada para caber". Nota: a proporção mudará.
— Devdrc # 17/17
10

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

background-size: contain;
background-repeat: no-repeat;
— justinpees
fonte
9

Eu uso isso e funciona com todos os navegadores:

<html>
    <head>
        <title>Stretched Background Image</title>
        <style type="text/css">
            /* Remove margins from the 'html' and 'body' tags, and ensure the page takes up full screen height. */
            html, body {height:100%; margin:0; padding:0;}

            /* Set the position and dimensions of the background image. */
            #page-background {position:fixed; top:0; left:0; width:100%; height:100%;}

            /* Specify the position and layering for the content that needs to appear in front of the background image. Must have a higher z-index value than the background image. Also add some padding to compensate for removing the margin from the 'html' and 'body' tags. */
            #content {position:relative; z-index:1; padding:10px;}
        </style>
        <!-- The above code doesn't work in Internet Explorer 6. To address this, we use a conditional comment to specify an alternative style sheet for IE 6. -->
        <!--[if IE 6]>
        <style type="text/css">
            html {overflow-y:hidden;}
            body {overflow-y:auto;}
            #page-background {position:absolute; z-index:-1;}
            #content {position:static;padding:10px;}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="page-background"><img src="http://www.quackit.com/pix/milford_sound/milford_sound.jpg" width="100%" height="100%" alt="Smile"></div>
        <div id="content">
            <h2>Stretch that Background Image!</h2>
            <p>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.</p>
            <p>Go on, try it - resize your browser!</p>
        </div>
    </body>
</html>
— Mahdi jokar
fonte
9

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:

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

Então mude isso para 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 nos meus temas do Drupal Tendustyle.css :

html, corpo {height: 100%;}

#page {background: #ffffff; height: auto! important; height: 100%; min-height: 100%; position: relative;}

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

<img alt = "" class = "stretch" src = "imagem.url" />

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

— Cybr
fonte
8

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:noneregra CSS, assim:

<html>
    <head>
        <style type="text/css">

            html,body {
                height: 100%;
                width: 100%
                margin: none;
                padding: none;
            }

            #background {
                width: 100%;
                height: 100%;
                position: fixed;
                left: 0px;
                top: 0px;
                z-index: -99999;
                -webkit-user-select: none;
                -khtml-user-select: none;
                -moz-user-select: none;
                -o-user-select: none;
                user-select: none;
            }

            #background img {
                width: 100%;
                height: 100%;
            }

            #main{ z-index:10;}
        </style>
    </head>
    <body>
        <div id="main">
            content here
        </div>
        <div id="background"><img src="bg.jpg"></div>
    </body>
</html>

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.

— Myke Black
fonte
Em seguida, use Não img apenas um div com a BG que não deve ser selecionado
— Jacek Pietal
7

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: ------------------------

<div id="background">
    <img src="img.jpg" class="stretch" alt="" />
</div>

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%;
}
— AnnieDee
fonte
5

Usei uma combinação das propriedades CSS background-X para obter a imagem de fundo ideal de escala.

background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;

Isso faz com que o plano de fundo sempre cubra toda a janela do navegador e permaneça centralizado ao dimensionar.

— Ryan Den-Kaat
fonte
4

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 :).

— Daniel
fonte
3

Se você deseja que o conteúdo seja centralizado horizontalmente, use uma combinação como esta:

background-repeat: no-repeat;
background-size: cover;
background-position: center;

Isso ficará lindo.

— Samuel Ramzan
fonte
1

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-imagepropriedade é 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 a background-size:coverpropriedade.

— Natesh bhat
fonte
0

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.

— MarioRicalde
fonte
Bom ponto. Mas eu estou usando jpg para a imagem de fundo, ela é de cerca de 1500x1000 e leva pouco mais de 100kb. Mas como você fez isso?
— Fábio Antunes
1
Que tal centralizar a imagem horizontalmente e suavizar as bordas da imagem com uma cor sólida ou um padrão? Isso permitiria uma adaptação perfeita se o usuário tiver mais do que a resolução da imagem.
— 9339 MarioRicalde
Mas eu quero que a imagem preencha o fundo. O que você está dizendo, é o que eu costumo fazer.
— Fábio Antunes
0

O seguinte funcionou para mim.

.back-ground {
   background-image: url("../assets/background.png");
   background-size: 100vw 100vh;
}

que trabalhou para cobrir todo o plano de fundo em diferentes dimensões

— tony2tones
fonte
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.