background image is not getting displayed - html

Question

Am new to html. I went through similar questions but none solved my problem. Can anyone help. Thanks in advance.
The File location is correct.
My code:
<div id="bg">
</div>
Css:
#bg{
background-image: url("bg.png");
}

Answer 1

Try this:
For demonstration i used 500px x 500px you can go with 100% x 100% too preferable with a container wrapped around the div. You don't need display: block; here in your css because a div already has display block as a standard for most browsers.
#bg{
width:500px;
height:500px;
background-image: url('bg.png');
}
Also be sure that the width and height matches the width and height of your image.
Your map with your files should be looking something like this:
index.html
bg.png
mycss.css
... many other .html / .php / .css
If you want to use a container, your css would look something like this. Try using container if you're going to work more with css, it's a really good thing too use for different browser sizes.
#bg{
width: 100%;
height: 100%;
}
.container{
width: 500px;
height: 500px;
}
And your HTML
<div class="container">
<div id="bg"></div>
</div>

Answer 2

The path is wrong, check my comment under the question. The Image should be in the same place as the css or the path should be url('../bg.png'); if it is up one level etc.... try this and if it comes p red the path is wrong
#bg {
background: #ff0000 url("bg.png") no-repeat right top;
}

Answer 3

As you are setting the background-image of a div that div must contain something. And the background-image will sized accordingly with the size of the element contained inside the div.
Try this,
#bg{
background: url("http://www.mascotdesign.com/_dev/images/famous-cartoon-character-mickey-mouse.png");
background-size : 100% 100%;
background-repeat : no-repeat;
}
jsFiddle