具有背景图像且没有内容不显示的 Div

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

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 3

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

Answer 4

Add height and width to it.

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

Answer 5

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)