Posso ter várias imagens de fundo usando CSS?

StackOverflow https://stackoverflow.com/questions/423172

  •  05-07-2019
  •  | 
  •  

Pergunta

É possível ter duas imagens de fundo? Por exemplo, eu gostaria de ter repita uma imagem na parte superior (repeat-x), e outra repetição em toda a página (repetição), onde o único em toda a página está por trás o que se repete ao longo do topo.

Eu descobri que eu posso alcançar o efeito desejado por duas imagens de fundo, definindo o fundo de html e corpo: 

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

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

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

Foi útil?

Solução

CSS3 permite esse tipo de coisa e parece que isso: 

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 suportam agora ele , no entanto, se você precisa apoiar IE8 ou abaixo, então a melhor maneira que você pode trabalhar em torno dele é 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;
}

Outras dicas

A maneira mais fácil que eu encontrei para usar duas imagens diferentes do fundo em um div é com esta linha de código: 

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

Obviamente, isso não tem que ser apenas o corpo do site, você pode usar isso para qualquer div quiser.

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

Use esta 

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-lo a cada posição da imagem com background-position: e conjunto de propriedades repita com background-repeat: para cada imagem individualmente

A versão atual do FF e IE e alguns outros navegadores suportam múltiplas imagens de fundo em uma única declaração CSS2. Olhe aqui http://dense13.com/blog/ 2008 / / 08/31 múltiplas-fundo-imagens-com-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 a adição de um comportamento. Olhe aqui: http://css3pie.com/

Sim, é possível, e foi implementado pela popular site de testes de usabilidade Silverback . Se você olhar através do código-fonte você pode ver que o fundo é composta de várias imagens, colocado em cima uns dos outros.

Aqui está o artigo que demonstra como fazer o efeito pode ser encontrado em A vitamina . Um conceito similar para envolver estes 'cebola pele' camadas podem ser encontradas no A List Apart .

Se você quiser múltiplas imagens de fundo, mas não quer que eles se sobrepõem, você pode usar 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>


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

Podemos facilmente adicionar múltiplas imagens usando CSS3. podemos ler em detalhes aqui http://www.w3schools.com/css/css3_backgrounds.asp

Você poderia ter um div para a parte superior com um fundo e outro para a 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 eu duvido que ele irá funcionar em todos os navegadores que você encontrar.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top