I am trying to apply a background image/colour to the row entitled:
<div class="row-fluid promotion">
. However, when I do set such a background, the background appears in the row before, entitled <div class="row-fluid products-row">
I have seen a few articles, on here with similar issues, but their solutions do not seem to answer my problem.
HTML/PHP
<div class="row-fluid products-row">
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4 product-image-links" id="product-image-a">
<a href="https://www.example.com/product-a/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-a.jpg" height="200" width="200"></a>
<h3 class="button"><a href="https://www.example.com/product-a/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product A</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-image-b">
<a href="https://www.example.com/product-b/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-b.jpg" height="200" width="200"></a>
<h3 class="button"><a href="https://www.example.com/product-b/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product B</span><i class="fa fa-circle" aria-hidden="true"></i></a></h3>
</div>
<div class="col-xs-12 col-sm-4 col-md-4 col-lg-4" id="product-c">
<a href="https://www.example.com/product-c/"><img src="http://www.example.com/wp-content/uploads/2017/03/product-c.jpg" height="200" width="200"></a>
<h3 class="button"><a href="https://www.example.com/product-c/"><i class="fa fa-circle" aria-hidden="true"></i><span class="product-title">Product C</span><i class="fa fa-cirlce" aria-hidden="true"></i></a></h3>
</div>
</div>
<div class="row-fluid promotion">
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<p>Text Text Text</p>
</div>
<div class="col-xs-12 col-sm-8 col-md-8 col-lg-8">
<p>Text Text Text</p>
</div>
<div class="col-xs-12 col-sm-2 col-md-2 col-lg-2">
<p>Text Text Text</p>
</div>
</div>
CSS
.products-row{
text-align: center;
}
#product-image-a{
width: 29.3%;
border-radius: 25px;
list-style-type: none;
background-color: green;
background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png");
padding-top: 25px;
padding-bottom: 10px;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
margin-left: 2%;
margin-right: 4%;
margin-bottom: 50px;
}
#product-image-b{
width: 29.3%;
border-radius: 25px;
list-style-type: none;
background-color: green;
background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png");
padding-top: 25px;
padding-bottom: 10px;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
margin-left: 2%;
margin-right: 4%;
margin-bottom: 50px;
}
#product-image-c{
width: 29.3%;
border-radius: 25px;
list-style-type: none;
background-color: green;
background-image: url("http://www.example.com/wp-content/uploads/2017/03/pattern.png");
padding-top: 25px;
padding-bottom: 10px;
-webkit-box-shadow:0 0 20px rgba(0,0,0,0.8);
-moz-box-shadow:0 0 20px rgba(0,0,0,0.8);
box-shadow:0 0 20px rgba(0,0,0,0.8);
margin-right: 2%;
margin-bottom: 50px;
}
.button{
background-color: green;
font-weight: bold;
margin-left: 30px;
margin-right: 30px;
padding-top: 10px;
padding-bottom: 10px;
border-top-left-radius: 15px;
border-top-right-radius: 40px;
border-bottom-right-radius: 15px;
border-bottom-left-radius: 40px;
-moz-box-shadow: inset 0 0 10px #000000;
-webkit-box-shadow: inset 0 0 10px #000000;
box-shadow: inset 0 0 10px #000000;
}
.product-title{
padding-left: 20px;
padding-right: 20px;
}
.promotion{
background: silver;
height: 30px;
background-image: url(http://www.example.com/wp-content/uploads/2017/03/pattern.png);
}