2

Eu tenho este código, e não percebo porque não funciona, o que eu queria era ter dois backgrounds um no top center outro bottom center. mas só funciona em baixo e não é esse o suposto ficar em baixo. Alguma sugestão? Obrigado

body {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: url('../imgs/aboutUsBg1.jpg') center top no-repeat, 
                  url('../imgs/aboutUsBg2.jpg') center bottom no-repeat;
  height: 100%;
  width: 100%;
}

Podem ver a página aqui se quiserem dar uma olhada: http://www.iwanttobesanta.com/about_us.html

3
  • Acredito que não é possível fazer isso, acho melhor você ajuntar as duas imagens e fazer delas uma só... Commented 26/03/2014 às 15:39
  • Ok Obgado vou fazer isso
    – Miguel
    Commented 26/03/2014 às 15:45
  • é possível, sim.. mas mesmo assim, ainda acho que é melhor juntar em uma imagem. Commented 26/03/2014 às 15:51

1 Resposta 1

3

Aqui está um exemplo que funciona: http://jsfiddle.net/dke7L/

  • Lembre-se de deixar transparente as divs que vem dentro de body.
    Tudo o que vier no corpo da página, aparecerá acima do background do body.
    Eu dei uma olhada em sua página e uma <div id="missValBar"> tem o fundo branco, que está ficando por cima do background.

  • o seu body tem esse CSS-inline: background-position: 50% 1143.2px, 50%;, ele está mexendo com o fundo da página. Remova-o.

1
  • Obgado mas como pode ver nas outras pags que teem só uma imagem de fundo mas com repeat-y resulta
    – Miguel
    Commented 26/03/2014 às 16:20

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .