Background image in posts

Question

I'm trying to get the featured image to display in the background-image of each standard post-format post. So I'm successful in grabbing the image and was able to make it 100% of the width and height within the container. However, it displays as an image and pushes the text below. How would I get the text in the post to display on top of it? Here is my code.

content.php

<section class="m-feat-img">
    <?php
    $standard_img = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID));
    if( $standard_img ) {
    ?>
    <img src="<?php echo $standard_img[0]; ?>" width="<?php echo $standard_img[1]; ?>" height="<?php echo $standard_img[2]; ?>">
    <?php } ?>
</section>



<article <?php post_class(); ?>>
  <div class="entry-summary">
    <?php the_excerpt(); ?>
  </div>
</article>
  <header>
     <h2 class="entry-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
  </header>

and here is my styling for the box so far.

.m-feat-img img {
  width: 100%;
  height: 100%;
}

Any help in the right direction is appreciated!!! Thanks.

Answer 1

The quickest way to achieve this effect is to position: absolute the background image. If your background image is in front of your text you can then use z-index to change the z-order.

See https://developer.mozilla.org/en-US/docs/Web/CSS/position and https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for reference on the 2 mentioned properties.