0

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.

1 Answer 1

0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.