Don't show background image in entire row - html

Question

I'm trying to show an image full width in the background of three columns. I thought if I wrapped the three columns in a div and put a background on the div, it would happen, instead it showing the background on the entire screen. How do I make it so it just shows in the background below the hr line.
So I don't want the background to show in the sections:
What is an Apple?
The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.
Here's my bootply:
http://www.bootply.com/BT0SWRh3aq
Here's my html:
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>What is an Apple?</h2>
<p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
<hr class="section-heading-spacer">
<div class="clearfix"></div>
</div>
<div class="row" id="bg-pink-data-points">
<div class="col-md-4 col-xs-12">
<h3>LADY</h3>
<p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>GRANNY SMITH</h3>
<p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>GOLDEN DELICIOUS</h3>
<p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p>
</div>
</div>
</div>
<!-- /.container -->
</div></div>
Here's a CSS:
#bg-pink-data-points {
background-image: url("http://10steps.sg/wp-content/uploads//2012/11/White-christmas-light-background.jpg");
}
.content-section-a {
padding: 50px 0;
}

Answer 1

It looks like you have minor disturbance in your HTML Structure .row in another .row, well you can try this:
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>What is an Apple?</h2>
<p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
<hr class="section-heading-spacer">
<div class="clearfix"></div>
</div>
</div>
<div class="row" id="bg-pink-data-points">
<div class="col-md-4 col-xs-12">
<h3>LADY</h3>
<p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>GRANNY SMITH</h3>
<p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>GOLDEN DELICIOUS</h3>
<p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p>
</div>
</div>
</div>
<!-- /.container -->
</div>
Demo URL: http://www.bootply.com/0m5JJ6pMM0
If you wants to play with Background to be extend, you can also play with the same CSS property which is styled for Background #bg-pink-data-points:
#bg-pink-data-points {
background-image: url("http://10steps.sg/wp-content/uploads//2012/11/White-christmas-light-background.jpg");
padding: 10px;
}
You can play with some more options as well. Demo URL:
http://www.bootply.com/Poi6HlXOa8

Answer 2

Please wrap .col-lg-12 in a row to set its proper layout..
<div class="content-section-a">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>What is an Apple?</h2>
<p>The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple.</p>
<hr class="section-heading-spacer">
</div>
</div>
<div class="row" id="bg-pink-data-points">
<div class="col-md-4 col-xs-12">
<h3>LADY</h3>
<p>One of the oldest known varieties, this tiny apple is said to have gotten its name because women would keep them in their purses to sniff when they encountered bad odors.</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>GRANNY SMITH</h3>
<p>The Baldwin was among the most popular American apples until 1934, when a freeze wiped out most of its trees.</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>GOLDEN DELICIOUS</h3>
<p>This heirloom hails from Denmark, but in the United States, it's grown almost exclusively in Sonoma County, CA, where it's celebrated with an annual festival. </p>
</div>
</div>
<!-- /.container -->

Answer 3

Remove the float: left; on the <div class="col-lg-12"> or overwrite it with float: none;