Div with background image and no content not displaying

I currently have a div on my page that I have given a background image. This di开发者_如何转开发v 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?

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.

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

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.

Add height and width to it.

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

Adding an empty //content// worked for me. Setting width/height or min-width/min-height didn't force the background image to appear. (Chrome 51 on Win8)