Div with background image and no content not displaying

Question

I currently have a div on my page that I have given a background image. This div does not have any content and so it does not display on my page, if I add any content it displays. I would like it display even without content because I want that background image to show up as well as I would like to assign some hover/click events to it.

Is there any way to force the div to display?

Answer 1

You need to specify a size:

<div style="width: 100px; height: 100px"></div>

You can set the size to the dimensions of your background image, or any other values you desire.

Answer 2

You need to specify width and height of that div using css (or min-width and min-height)

Answer 3

Add a height and a width to the div. You may want to use min-height and min-width and set them equal to the size of your background image.

Adding an empty comment will help browsers that strip empty tags.

Answer 4

Add height and width to it.

Jsfiddle: http://jsfiddle.net/GFTtY/