B_D_E B_D_E - 4 years ago 126
CSS Question

HTML - Add a background image to a div

I'm trying to create a website with a header that stretches across the top, and i want this header to have a background image... But, I can't work out how to do it... I've tried plenty of techniques I have found on stack overflow but haven't been able to get any of them to work.
Below is my code for the header section:

<div class="jumbotron text-center" style="color:#ffffff">
<h1>HEADING</h1>
<p>SUBHEADING</p>
</div>


Any help on how I can give this div a background image will be much appreciated!

(also sorry in advance, I'm an absolute HTML noob)

Answer Source

Setting a background on div is easy, do it like

Style

<style type="text/css">
.bgimg {
    background-image: url('../images/bg.png');
}
</style>

Html

<div class="jumbotron text-center bgimg" style="color:#ffffff">
    <h1>HEADING</h1>
    <p>SUBHEADING</p> 
</div>

Give .bgimg css class to div and you can see the background

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download