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?
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?
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>
url('http://cdn.sstatic.net/br/img/apple-touch-icon.png')
, mas corta pedaços da imagem...
Commented
25/10/2014 às 22:55
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>