3

Estou criando uma div vazia com uma imagem de background. Mas quando vou renderizar o site, a div não aparecer. Acredito eu que o erro acontece por não ter conteúdo na div.

Neste caso como poderia eu proceder?

3
  • Como está o seu css? Se você definir dimensões para a div, o bg deve aparecer.
    – bfavaretto
    Commented 25/10/2014 às 21:35
  • 1
    estou usando o bootstrap. então cada div ja vem com a class de dimensão do bootstrap
    – Adão Dias
    Commented 25/10/2014 às 21:48
  • Isso para a largura, né? Mas acho que você precisa forçar uma altura.
    – bfavaretto
    Commented 25/10/2014 às 21:50

2 Respostas 2

6

Defina a largura e altura da imagem. No exemplo eu inseri uma imagem de tamanho 500x500, logo então as propriedades width e height serão equivalentes à 500px. Provavelmente o que faltou no seu código CSS foi o alinhamento do background no centro utilizando a propriedade background-position:center;.

Observe:

.minhaDiv 
{
   background-image: url('https://g.twimg.com/Twitter_logo_blue.png'); /* endereço URL da imagem */
   background-position:center; /* centraliza apenas o background - para não cortar */   
   height: 500px; /* defina a largura da imagem */
   width: 500px; /* defina a altura da imagem */
   background-repeat:no-repeat; /* para não repetir o background */
}
<div class="minhaDiv"></div>

6
  • Só pra resposta ficar mais completa, ia ser legal um demonstrativo com um StackSnippet. Testei usando url('http://cdn.sstatic.net/br/img/apple-touch-icon.png'), mas corta pedaços da imagem...
    – brasofilo
    Commented 25/10/2014 às 22:55
  • @brasofilo haha, obrigado por informar. Agora está tudo certo!
    – Corvo
    Commented 25/10/2014 às 23:10
  • Fiz uma edição, confira o histórico para ver razões ;)
    – brasofilo
    Commented 25/10/2014 às 23:19
  • Nas próximas vezes serei mais claro ao apresentar uma solução.
    – Corvo
    Commented 25/10/2014 às 23:24
  • Massa, ++1, tá redondo agora.
    – brasofilo
    Commented 25/10/2014 às 23:31
0

Dentro do head, coloquei a tag style onde está toda o CSS configurando a imagem. A tag div coloquei uma class="imagem" que está sendo utilizada dentro do style no qual está sendo definido o tamanho e largura ocupando 100% da div(que ocupa toda a tela) bem como utilizando um no-repeat para que a imagem não fique se repetindo na tela.

<html>
<head>
    <style>
        *{
            margin: 0px;
            border: 0px;
        }
        .imagem{
            height: 100%;
            width: 100%;
            background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Webysther_20131025132658_-_Terceira_Ponte.jpg/1920px-Webysther_20131025132658_-_Terceira_Ponte.jpg") no-repeat;
        }

    </style>
</head>
    <body>
            <div class="imagem">

            </div>
    </body>
</html>

Resultado: inserir a descrição da imagem aqui

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 .