Como faço para esticar uma imagem de plano de fundo para cobrir todo o elemento HTML?

88

Estou tentando obter uma imagem de plano de fundo de um elemento HTML (corpo, div, etc.) para esticar toda a sua largura e altura.

Não tendo muita sorte. É mesmo possível ou tenho que fazer de outra forma além de ser uma imagem de fundo?

Meu css atual é:

body {
    background-position: left top;
    background-image: url(_images/home.jpg);
    background-repeat: no-repeat;
}

Desde já, obrigado.

Edit: Não estou interessado em manter o CSS na sugestão de Gabriel, então estou mudando o layout da página. Mas essa parece ser a melhor resposta, então estou marcando como tal.

Fung
fonte
Claro, você poderia usar JavaScript para fazer isso dinamicamente, mas provavelmente seria pior do que os hacks CSS sugeridos pelo link de gabriel1836.
Jason Bunting,
Para preservar a proporção da imagem, você deve usar "background-size: cover;" ou "tamanho do fundo: conter;". Eu construí um polyfill que implementa esses valores no IE8: github.com/louisremi/background-size-polyfill
Louis-Rémi

Respostas:

192
<style>
    { margin: 0; padding: 0; }

    html { 
        background: url('images/yourimage.jpg') no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
    }
</style>
Nathan
fonte
Isso também funciona como marcas de estilo em elementos html ou em arquivos css.
Nathan,
2
esta é a melhor solução de sempre.
AFD de
1
Qual é a diferença entre cobertura e 100% 100%?
Pacerier
4
100% 100% não mantém a proporção da imagem original. 'cobrir' dimensiona a imagem, enquanto preserva 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 fundo. Você também pode usar 'contêiner' para dimensionar a imagem, enquanto preserva sua proporção intrínseca (se houver), para o maior tamanho de forma que sua largura e altura possam caber dentro da área de posicionamento do fundo.
Mike737
"-webkit-background-size: cover;" não é uma propriedade CSS3 válida.
VoidKing
14

Use a background-sizepropriedade: http://www.w3.org/TR/css3-background/#the-background-size

Kornel
fonte
1
Incrível, esta é a resposta correta. Provavelmente não funciona no IE, mas estou direcionando apenas o webkit para o meu projeto, então isso é perfeito :)
aehlke
8

Em suma, você pode tentar isso ....

<div data-role="page" style="background:url('backgrnd.png'); background-repeat: no-repeat; background-size: 100% 100%;" >

Onde usei poucos css e js ...

<link rel="stylesheet" href="css/jquery.mobile-1.0.1.min.css" />
<script src="js/jquery-1.7.1.min.js"></script>
<script src="js/jquery.mobile-1.0.1.min.js"></script>

E está funcionando bem para mim.

Tamal Samui
fonte
Para quem NÃO quer manter a proporção!
BillyNair
6

Não tenho certeza se esticar uma imagem de fundo é possível. Se você achar que não é possível ou não é confiável em todos os seus navegadores de destino, você pode tentar usar uma tag img esticada com z-index definido para baixo e posicionar definido como absoluto para que outro conteúdo apareça em cima dela.

Nos informe do que você acabar fazendo.

Edit: O que eu sugeri é basicamente o que está no link de Gabriel. Então tente isso :)

Travis Collins
fonte
1
Eu vi essa técnica em ação pelo menos uma década atrás. Não consigo imaginar que ainda não funcionasse agora.
ausência de pálpebras,
5

Para expandir a resposta @PhiLho, você pode centralizar uma imagem muito grande (ou de qualquer tamanho) em uma página com:

{ 
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}

Ou você pode usar uma imagem menor com uma cor de fundo que corresponda ao fundo da imagem (se for uma cor sólida). Isso pode ou não atender aos seus objetivos.

{ 
background-color: green;
background-image: url(_images/home.jpg);
background-repeat:no-repeat;
background-position:center; 
}
Traingamer
fonte
4

Se você precisar esticar sua imagem de fundo ao redimensionar a tela e não precisar de compatibilidade com versões mais antigas do navegador, isso fará o trabalho:

body {
    background-image: url('../images/image.jpg');
    background-repeat: no-repeat;
    background-size: cover;
}
Leocborges
fonte
3

Se você tiver uma imagem grande de paisagem, este exemplo aqui redimensiona o fundo no modo retrato, para que seja exibido na parte superior, deixando em branco na parte inferior:

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    background-image: url('myimage.jpg');
    background-position-x: center;
    background-position-y: bottom;
    background-repeat: no-repeat;
    background-attachment: scroll;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

@media screen and (orientation:portrait) {
    body {
        background-position-y: top;
        -webkit-background-size: contain;
        -moz-background-size: contain;
        -o-background-size: contain;
        background-size: contain;
    }
}
amor ao vivo
fonte
3

O código a seguir eu uso principalmente para alcançar o efeito solicitado:

body {
    background-image: url('../images/bg.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
}
Badar
fonte
3
Você precisabackground-size: 100% 100%;
Sablefoste de
Não sei que navegador você usa, mas o que eu disse funciona para mim no Firefox e no Chrome.
Badar,
2
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;
Behnam Mohammadi
fonte
0

Você não pode em CSS puro. Ter uma imagem cobrindo toda a página atrás de todos os outros componentes é provavelmente sua melhor aposta (parece que essa é a solução fornecida acima). De qualquer forma, é provável que pareça horrível de qualquer maneira. Eu tentaria uma imagem grande o suficiente para cobrir a maioria das resoluções de tela (digamos até 1600x1200, acima dela é mais escassa), para limitar a largura da página, ou apenas usar uma imagem nesse bloco.

PhiLho
fonte
0

imagem{

background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  padding: 0 3em 0 3em; 
margin: -1.5em -0.5em -0.5em -1em; 
  width: absolute;
  max-width: 100%; 
Ebele Nwaelene
fonte
2
Bem-vindo ao SO! Para escrever uma resposta melhor, acrescente algum raciocínio sobre por que funciona e mostre o código em ação. Você também pode ler sobre como escrever uma boa resposta .
displacedtexan
0

Basta fazer um div para ser o filho direto do corpo (com o nome de classe bg, por exemplo), abrangendo todos os outros elementos no corpo, e adicionar isso ao arquivo CSS:

.bg {
    background-image: url('_images/home.jpg');//Put your appropriate image URL here
    background-size: 100% 100%; //You need to put 100% twice here to stretch width and height
}

Consulte este link: https://www.w3schools.com/css/css_rwd_images.asp Role para baixo até a parte que diz:

  1. Se a propriedade background-size for definida como "100% 100%", a imagem de fundo será esticada para cobrir toda a área de conteúdo

Lá ele mostra o 'img_flowers.jpg' estendendo-se para o tamanho da tela ou do navegador, independentemente de como você o redimensiona.

Salah Ayman
fonte
-1

Funciona para mim

.page-bg {
  background: url("res://background");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
msk_sureshkumar
fonte