Caverman Caverman - 1 month ago 7
CSS Question

How can I display text or image in a div with an image in it's content?

I have a div tag used for a banner so I'm setting it's content to be an image. However, I would like to display some text and glyphicons inside of that div. I'm was trying to use a Bootstrap Grid to lay it out but I can't get anything to display inside the div. I've tried just putting in some simple text without any luck.

What is the proper way to do something like that?

This is what I've tried. The image shows up but none of the text.

div.banner {
content: url('../Images/banner.jpg');
background-color: #A5B7C7;
}​

<div class="banner">
<div class="row">
<div class="col-md-6"> something goes here</div>
<div class="col-md-6"> something else</div>
</div>
</div>

Answer

Instead of the css property content, use the property background like:

div.banner {
    background: url('../Images/banner.jpg');
}​