3
I am creating an empty div with a background image. But when I render the site, the div does not appear. I believe that the mistake happens because there is no content in the div.
In this case how could I proceed?
2 answers
6
Set the width and height of the image. In the example I inserted an image of size 500x500, then the properties width and height shall be equivalent to 500px. Probably what was missing from your CSS code was the alignment of the center background using the property 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>-
Just to make the answer more complete, it would be nice to have a demonstration with a Stacksnippet. I tested using
url('http://cdn.sstatic.net/br/img/apple-touch-icon.png'), but cut pieces of the image... -
@brasofilo haha, thanks for reporting. Now it’s all right!
-
I made an edit, check the history to see reasons ;)
-
Next time I’ll be clearer when I come up with a solution.
-
Pasta, ++1, it’s round now.
-
being so. everything worked perfectly. I thank everyone. the/
0
Inside the head, I put the style tag where all the CSS is configuring the image. The tag div put a class="image" that is being used within the style in which the size and width is being set occupying 100% of the div(that occupies the entire screen) as well as using a no-repeat so that the image does not keep repeating on the screen.
<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>
Upshot: 
Browser other questions tagged html css
You are not signed in. Login or sign up in order to post.
How is your css? If you set dimensions for the div, bg should appear.
– bfavaretto
I am using bootstrap. so each div already comes with the bootstrap dimension class
– Adão Dias
That for the width, right? But I think you need to force a height.
– bfavaretto