title: How do I place my background color at the bottom of my content's container?
body: <p>I would like to apply a background color, with a height of 200px.  I would then like to position this background colour at the bottom of the concerned content.  I have managed to achieve this across the other web pages I am working on but struggling with this page.  No matter what I do, the background colour stays at the top of the content's container.</p>
  
  <p><strong>HTML/PHP:</strong></p>
  
  <pre><code> &lt;div class="row" id="latest-products"&gt;
      &lt;h2 id="latest-products-title-row"&gt;&lt;i class="fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"&gt;&lt;/i&gt;&lt;span id="latest-products-title"&gt;Latest Products&lt;/span&gt;&lt;i class="fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"&gt;&lt;/i&gt;&lt;/h2&gt;
          &lt;ul class="row-fluid"&gt;
              &lt;?php
                  $args = array( 'post_type' =&gt; 'product', 'stock' =&gt; 1, 'posts_per_page' =&gt; 4, 'orderby' =&gt;'date','order' =&gt; 'DESC' );
                  $loop = new WP_Query( $args );
                  while ( $loop-&gt;have_posts() ) : $loop-&gt;the_post(); global $product; 
              ?&gt;
                          &lt;li class="latest-products-content"&gt;    
                              &lt;a id="id-&lt;?php the_id(); ?&gt;" href="&lt;?php the_permalink(); ?&gt;" title="&lt;?php the_title(); ?&gt;"&gt;
                                  &lt;?php 
                                      if (has_post_thumbnail( $loop-&gt;post-&gt;ID )) 
                                      echo get_the_post_thumbnail($loop-&gt;post-&gt;ID, 'shop_catalog'); 
                                      else echo '&lt;img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" /&gt;'; 
                                  ?&gt;
                              &lt;/a&gt;
                                  &lt;h3&gt;&lt;?php the_title(); ?&gt;&lt;/h3&gt;
                                  &lt;p&gt;&lt;?php the_excerpt(); ?&gt;&lt;/p&gt;
                                  &lt;div class="price"&gt;&lt;i class="fa fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"&gt;&lt;/i&gt;&lt;span id="product-price"&gt;&lt;?php echo $product-&gt;get_price_html(); ?&gt;&lt;/span&gt;&lt;i class="fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"&gt;&lt;/i&gt;&lt;/div&gt;
                                  &lt;div class="view/buy"&gt;&lt;a id="id-&lt;?php the_id(); ?&gt;" href="&lt;?php the_permalink(); ?&gt;" title="&lt;?php the_title(); ?&gt;"&gt;View/Buy&lt;/a&gt;&lt;/div&gt;
                          &lt;/li&gt;
                  &lt;?php endwhile; ?&gt;
                  &lt;?php wp_reset_query(); ?&gt;
          &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#latest-products{
      background-color: blue;
      height: 200px;
      background-position: bottom;
  }
  </code></pre>
  
  <p>Any suggestions on where I could be going wrong here, would be appreciated.</p>