Craig Craig - 9 months ago 30
CSS Question

How do I place my background color at the bottom of my content's container?

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.

HTML/PHP:

<div class="row" id="latest-products">
<h2 id="latest-products-title-row"><i class="fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"></i><span id="latest-products-title">Latest Products</span><i class="fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"></i></h2>
<ul class="row-fluid">
<?php
$args = array( 'post_type' => 'product', 'stock' => 1, 'posts_per_page' => 4, 'orderby' =>'date','order' => 'DESC' );
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post(); global $product;
?>
<li class="latest-products-content">
<a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
<?php
if (has_post_thumbnail( $loop->post->ID ))
echo get_the_post_thumbnail($loop->post->ID, 'shop_catalog');
else echo '<img src="'.woocommerce_placeholder_img_src().'" alt="Placeholder" width="65px" height="115px" />';
?>
</a>
<h3><?php the_title(); ?></h3>
<p><?php the_excerpt(); ?></p>
<div class="price"><i class="fa fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"></i><span id="product-price"><?php echo $product->get_price_html(); ?></span><i class="fa fa-dot-circle-o fa-rotate-270" aria-hidden="true"></i></div>
<div class="view/buy"><a id="id-<?php the_id(); ?>" href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">View/Buy</a></div>
</li>
<?php endwhile; ?>
<?php wp_reset_query(); ?>
</ul>
</div>


CSS

#latest-products{
background-color: blue;
height: 200px;
background-position: bottom;
}


Any suggestions on where I could be going wrong here, would be appreciated.

Answer Source

To use background position property you need to set background-image, so to fill bottom 200px area with color you can set following:

background-image: linear-gradient(blue, blue 100%);
background-size: 100% 200px;
background-repeat: no-repeat;
background-position: center bottom;