How can I get background to show in the bottom two rows - html

Question

I have three rows in my container. I'd like to apply one background across the bottom two rows. I don't want a background on the 1st row. I want to use one background ac I know I missing something, but can't figure out in the code where to edit it. My background only shows up in the first row of columns.
I don't want to apply a class to each .row that needs the background. The point is to specify the background once and have it apply to the two bottom rows.
Here's my bootply:
http://www.bootply.com/X5WsoQbuM1
Here's my HTML:
<div class="content-section-d">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h2>How many apples can you eat?</h2>
<p>
The apple tree (Malus domestica) is a deciduous tree in the rose family best known for its sweet, pomaceous fruit, the apple. I.</p>
</div>
</div>
<h2>Join us to pick the apples:</h2>
<div class="row centered-text" id="backgroundazul">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
</div>
</div>
<div class="row">
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
</div>
</div>
</div>
<!-- /.container -->
Here's my CSS:
#backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}

Answer 1

If you want the background for all row use a class and repeat row
/* CSS used here will be applied after bootstrap.css */
.backgroundazul {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
<div class="container">
<div class="row">
<h2>Join us to access:</h2>
</div>
<div class="row centered-text backgroundazul " >
<hr class="section-heading-spacer">
<div class="col-md-4 col-xs-12">
<h3>4,000,000+</h3>
<p>Apples</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>1,500,000+</h3>
<p>Oranges</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>150,000+</h3>
<p>Mangos</p>
</div>
</div>
<div class="row centered-text backgroundazul " >
<div class="col-md-4 col-xs-12">
<h3>68,000+</h3>
<p>Bananas</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>2,000+</h3>
<p>Honeydew</p>
</div>
<div class="col-md-4 col-xs-12">
<h3>3 years</h3>
<p>Blueberries</p>
</div>
</div>

Answer 2

Apply an id to you .container element and then apply the background to the .row elements.
<div id="backgroundazul" class="container">
<div class="row">
<!-- ... -->
</div>
<div class="row">
<!-- ... -->
</div>
</div>
#backgroundazul .row {
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
padding: 0 0 50px 0;
}
Updated Bootply. Note that you did not wrap your second row of data in a .row and will not have the background applied. I do not know if this was intentional or not.

Answer 3

The solution is simple - you just need to insert in your css code a single line, so the code will look like:
#backgroundazul{
background: url(http://www.psdgraphics.com/file/green-hexagons-background.png) no-repeat center center;
background-size: cover;
padding: 0 0 50px 0;
}
And that's it :-)