Posso ter várias imagens de plano de fundo usando CSS?

316

É possível ter duas imagens de fundo? Por exemplo, eu gostaria de repetir uma imagem na parte superior (repeat-x) e outra repetir na página inteira (repeat), onde a da página inteira está atrás da que se repete na parte superior.

Descobri que posso obter o efeito desejado para duas imagens de plano de fundo, definindo o plano de fundo de html e body:

html {
    background: url(images/bg.png);
}

body {
    background: url(images/bgtop.png) repeat-x;
}

Esse CSS é "bom"? Há um método melhor? E se eu quisesse três ou mais imagens de fundo?

css background-image Rudd Zwolinski
fonte

Respostas:

377

O CSS3 permite esse tipo de coisa e fica assim:

body {
    background-image: url(images/bgtop.png), url(images/bg.png);
    background-repeat: repeat-x, repeat;
}

As versões atuais de todos os principais navegadores agora o suportam ; no entanto, se você precisar oferecer suporte ao IE8 ou inferior, a melhor maneira de contornar isso é ter divs extras:

<body>
    <div id="bgTopDiv">
        content here
    </div>
</body>
body{
    background-image: url(images/bg.png);
}
#bgTopDiv{
    background-image: url(images/bgTop.png);
    background-repeat: repeat-x;
}
nickf
fonte
27
Vários fundos são suportados pelas versões mais recentes do Firefox, Chrome, Safari e Opera. Também será suportado no IE9. en.wikipedia.org/wiki/…
Šime Vidas 30/10/10
4
E se você deseja ter diferentes configurações de repetição / posição que você pode fazer isso: css3.info/preview/multiple-backgrounds
Krisc
2
Para o IE8 - IE6, você pode usar PIE.js. Você está aqui
Página Inicial
1
O tamanho do plano de fundo segue esta mesma regra? Quero que todas as minhas imagens de plano de fundo tenham altura total, exceto uma delas (que eu quero que seja a altura da imagem).
mtmurdock
Sim, o tamanho do plano de fundo segue a mesma regra (como todas as outras propriedades do plano de fundo). As propriedades de plano de fundo (geralmente começando com o prefixo background- e, em seguida, uma propriedade específica do plano de fundo) podem realmente ser especificadas dentro da própria propriedade de plano de fundo, portanto, como várias imagens de plano de fundo são suportadas, várias propriedades listadas também são suportadas. Isso se aplica ao tamanho, posição, repetição etc.
Cannicide
35

A maneira mais fácil de usar duas imagens de fundo diferentes em uma div é usando esta linha de código:

body {
    background:url(image1.png) repeat-x, url(image2.png) repeat;
}

Obviamente, isso não precisa ser apenas para o corpo do site, você pode usá-lo para qualquer div que desejar.

Espero que ajude! Há um post no meu blog que fala sobre isso um pouco mais profundamente, se alguém precisar de mais instruções ou ajuda - http://blog.thelibzter.com/css-tricks-use-two-background-images-for-one- div .

TheLibzter
fonte
Note que isto só funciona com fundo e background-image não com
halb yoel
24

usa isto 

body {
background: url(images/image-1.png), url(images/image-2.png),url(images/image-3.png);
background-repeat: no-repeat, repeat-x, repeat-y;
background-position:10px 20px , 20px 30px ,15px 25px;
}

uma maneira simples de ajustar cada posição da imagem com a posição de fundo: e defina a propriedade repeat com background-repeat: para cada imagem individualmente

code.rider
fonte
13

A versão atual do FF e IE e alguns outros navegadores suportam várias imagens de plano de fundo em uma única declaração CSS2. Veja aqui http://dense13.com/blog/2008/08/31/multiple-background-images-with-css2/ e aqui http://www.quirksmode.org/css/multiple_backgrounds.html e aqui http: / /nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/

Para o IE, você pode considerar adicionar um comportamento. Veja aqui: http://css3pie.com/

Shannon
fonte
4

Sim, é possível e foi implementado pelo popular site de testes de usabilidade Silverback . Se você olhar o código-fonte, poderá ver que o fundo é composto por várias imagens, colocadas uma em cima da outra.

Aqui está o artigo que demonstra como fazer o efeito pode ser encontrado na vitamina . Um conceito semelhante para envolver essas camadas de 'casca de cebola' pode ser encontrado em A List Apart .

Mike B
fonte
4

Se você deseja várias imagens de plano de fundo, mas não deseja que elas se sobreponham, use este CSS:

body {
  font-size: 13px;
  font-family:Century Gothic, Helvetica, sans-serif;
  color: #333;
  text-align: center;
  margin:0px;
  padding: 25px;
}

#topshadow {
  height: 62px
  width:1030px;
  margin: -62px
  background-image: url(images/top-shadow.png);
}

#pageborders {
width:1030px;
min-height:100%;
margin:auto;        
    background:url(images/mid-shadow.png);
}

#bottomshadow {
    margin:0px;
height:66px;
width:1030px;
background:url(images/bottom-shadow.png);
}

#page {
  text-align: left;
  margin:62px, 0px, 20px;
  background-color: white;
  margin:auto;
  padding:0px;
  width:1000px;
}

com esta estrutura HTML:

<body 

<?php body_class(); ?>>

  <div id="topshadow">
  </div>

  <div id="pageborders">

    <div id="page">
    </div>
  </div>
</body>
Rachel
fonte
2 

#example1 {
    background: url(http://www.w3schools.com/css/img_flwr.gif) left top no-repeat, url(http://www.w3schools.com/css/img_flwr.gif) right bottom no-repeat, url(http://www.w3schools.com/css/paper.gif) left top repeat;
    padding: 15px;
    background-size: 150px, 130px, auto;
background-position: 50px 30px, 430px 30px, 130px 130px;
}
<!DOCTYPE html>
<html>
<head>

</head>
<body>

<div id="example1">
<h1>Lorem Ipsum Dolor</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
</div>

</body>
</html>
Expandir snippet

Podemos facilmente adicionar várias imagens usando CSS3. podemos ler em detalhes aqui http://www.w3schools.com/css/css3_backgrounds.asp

Rinku
fonte
1

Você pode ter uma div na parte superior com um plano de fundo e outro na página principal e separar o conteúdo da página entre eles ou colocar o conteúdo em uma div flutuante em outro nível z. A maneira como você está fazendo isso pode funcionar, mas duvido que funcione em todos os navegadores que encontrar.

Sean James
fonte