Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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