Why is the CSS content image not showing?

Question

Consider this html:

<div class="logo-b"></div>

And this CSS:

div.logo-b {
    content: url(http://placehold.it/350x150);
    height: 150px;
    border: 1px solid darkred;
}

I am trying to display an image using CSS. Image is not displayed. Please take a look at jsfiddle to understand what I mean. What am I missing, please?

EDIT: It looks like Chrome is making a fiddle since I provided it above, but Firefox (which I use) does not. If I add :beforeor :afterto the class name in my CSS, the image will display in Firefox. Can someone shed some light on why it would be nice?

EDIT: I am using the wrong design to place the image on my page. In the context of what I am doing, I have to use the <img>html tag . The CSS construct contentuses :beforeand / or afterto host content, including images, but I understand that they are used in certain contexts. I just want to display the logo.

Answer 1

This property is contentused with :beforeand :afterpseudo-elements to create content in a document. - W3C

I think the behavior in Firefox is correct.