How to fill each column with responsive background? Bootstrap - html

Question

I would like each column to have its own background. I would like it to be fixed height as the columns are but so the width can adapt.
This is my html for the 3 blocks.
<section class="no-pad clearfix">
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-hfc">
<h1 class="text-white">Hellfire Citadel</h1>
<p class="text-white">Hellfire Assault<br>Iron Reaver<br>Kormrok<br>Kilrogg Deadeye<br>Hellfire High Council<br>Gorefiend<br>Shadow-Lord Iskar<br>Socrethar the Eternal<br>Tyrant Velhari<br>Fel Lord Zakuun<br>Xhul'horac<br>Mannoroth<br>Archimonde<br></p>
</div>
</div>
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-brf">
<h1 class="text-white">Blackrock Foundry</h1>
<p class="text-white">Oregorger<br>Gruul<br>The Blast Furnace<br>Hans'gar and Franzok<br>Flamebender Ka\'graz<br>Kromog<br>Beastlord Darmac<br>Operator Thogar<br>The Iron Maidens<br>Blackhand<br><br><br><br>
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-hm">
<h1 class="text-white">Highmaul</h1>
<p class="text-white">Kargath Bladefist<br>The Butcher<br>Brackenspore<br>Tectus<br>Twin Ogron<br>Ko'ragh<br>Imperator Mar'gok<br><br><br><br><br><br><br></p>
</div>
</div>
</section>
This is my css, each column is to have its own background:
.bg-hfc{
background-image:url('../img/hfcbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
}
.bg-brf{
background-image:url('../img/brfbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
}
.bg-hm{
background-image:url('../img/hmbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
}
you can find my currently not working demo here: http://endless-guild.com/wow_progress/show-progress.php
This is what I would like it to look like: http://cl.ly/image/1z3I33281R1b
Ignore the guide lines :)
I did lot of digging around but cant figure out what im doing wrong here. I know the code is awful. I am not very good at this and I would appreciate your help. Many love!

Answer 1

you almost had it right: Try this NEW and fixed HTML:
<section class="no-pad clearfix">
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-hfc col-xs-12">
<h1 class="text-white">Hellfire Citadel</h1>
<p class="text-white">Hellfire Assault
<br>Iron Reaver
<br>Kormrok
<br>Kilrogg Deadeye
<br>Hellfire High Council
<br>Gorefiend
<br>Shadow-Lord Iskar
<br>Socrethar the Eternal
<br>Tyrant Velhari
<br>Fel Lord Zakuun
<br>Xhul'horac
<br>Mannoroth
<br>Archimonde
<br>
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-brf col-xs-12">
<h1 class="text-white">Blackrock Foundry</h1>
<p class="text-white">Oregorger
<br>Gruul
<br>The Blast Furnace
<br>Hans'gar and Franzok
<br>Flamebender Ka\'graz
<br>Kromog
<br>Beastlord Darmac
<br>Operator Thogar
<br>The Iron Maidens
<br>Blackhand
<br>
<br>
<br>
<br>
</p>
</div>
</div>
<div class="col-md-4 col-sm-6 no-pad">
<div class="feature-box bg-hm col-xs-12">
<h1 class="text-white">Highmaul</h1>
<p class="text-white">Kargath Bladefist
<br>The Butcher
<br>Brackenspore
<br>Tectus
<br>Twin Ogron
<br>Ko'ragh
<br>Imperator Mar'gok
<br>
<br>
<br>
<br>
<br>
<br>
<br>
</p>
</div>
</div>
</section>
You where just missing the col-xs-12 on the classes.
EDIT
Try this CSS as well :)
.bg-hfc{
background-image:url('../img/hfcbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
width: 100%;
height: 100%;
}
.bg-brf{
background-image:url('../img/brfbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
width: 100%;
height: 100%;
}
.bg-hm{
background-image:url('../img/hmbg.png') !important;
background-repeat: no-repeat !important;
background-size: contain !important;
background-position: center !important;
width: 100%;
height: 100%;
}

Answer 2

This should do the trick:
.bg-hfc{
background-image: url('../img/hfcbg.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
fiddle.

Answer 3

Thank you all for your help.
Turn out 16 hours of coding is bit too much and I was being absolute moron and not even going to say how badly i messed up haha.
Anyway! The css I was after was this:
background-image: url('../img/brfbg.png');
background-repeat: no-repeat;
background-position: center;
background-size: cover;
You can see final result here:
Demo