0

Quero definir como página inicial do meu site uma imagem que ocupe todo o fundo, como segue:

<style type=text/css>
body {
    background-image: url("imagem.jpg");
    background-repeat: no-repeat;
    -moz-background-size: 100% 100%;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;}
}
</style>

Porém quero a mesma fixa no fundo (no lugar do fundo branco, que aparece normalmente) e por cima dessa imagem quero colocar o restante, que irá compor a tela. Rodapé, Topo, área de login, cadastro... Tudo posicionado sobre essa imagem, que será apenas o fundo. Posso fazer isso com div? Como procedo? Se alguém puder me orientar ou auxiliar com exemplo, agradeço.

inserir a descrição da imagem aqui

4
  • Esse código que você postou deu algum problema? Commented 12/08/2015 às 21:13
  • Não, carregou exatamente a imagem como fundo ocupando a tela toda. Agora como faço para manter essa imagem (deixar ela mais clara) e sobrepor conteúdo à esse fundo? Commented 12/08/2015 às 21:16
  • 1
    Então, se a imagem foi aplicada ao body, qualquer coisa dentro dele (que ja seria a página inteira) ja vai sobrepor ela, posta uma screenshot da sua intenção pra entender mais fácil. Commented 12/08/2015 às 21:20
  • Se o que você estiver tentando fazer é manter a imagem fixa em relação a rolagem da página, você pode usar a propriedade background-attachment:fixed; Commented 12/08/2015 às 23:20

2 Respostas 2

1

Pode utilizar a propriedade background-size:

body {
  background: url(https://i.sstatic.net/HWdW6.jpg);
  background-size: cover
}

0
1

Como o @re22 já disse, para que a imagem ocupe o tamanho todo da tela/ecrã por completo, podes utilizar a propriedade background-size: cover; e para que a imagem do background fique fixa conforme fazemos scroll de uma página/website, utiliza - background-attachment: fixed;:

background-image: url(imagem.jpg);  /* URL da imagem pretendida */
background-repeat: no-repeat;       /* A imagem não é para ser repetida ao longo da página */
background-position-x: center;      /* alinhamento horizontal : left|center|right|px */
background-position-y: center;      /* alinhamento vertical: top|center|bottom|px */
background-attachment: fixed;       /* A imagem é para ficar fixa quando utilizada a Scrollbar */
-webkit-background-size: cover;     /* Navegadores Chrome, Safari */
-moz-background-size: cover;        /* Firefox */
-o-background-size: cover;          /* Opera */
background-size: cover;             /* Todos os outros. Imagem como 'capa' ocupando 100% altura/largura sem perder a sua proporção */

Eis um exemplo abaixo com o código simplificado utilizando apenas - background:; para adicionarmos todos estes estilos mencionados acima de uma só vez:

body { 
    background: url(https://i.sstatic.net/SjGmV.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

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 .