Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 290
  • Last Modified:

Display featured image as background image?

I'd like to take a featured image and make it a background image.

I've attached a screen shot of what happens. When a featured image is in place, it takes over the entire box. What I would like to happen is the featured image is used as a background image.

Here is the code that is calling this in:

<article id="post-<?php the_ID() ?>" <?php post_class('popular-post') ?>>
	<?php if (has_post_thumbnail()) : ?>
		<a class="feature-img" href="<?php the_permalink() ?>"><?php the_post_thumbnail('feature-img'); ?></a>
	<?php else: ?>
		<div class="post-details">
			<?php printf('<div class="date-info">%s / <span class="time">%s</span></div>', get_the_date(), get_the_time()); ?>
			<a href="<?php the_permalink() ?>"><?php the_title('<h2 class="post-title">', '</h2>') ?></a>
		</div><!-- END POST DETAILS -->
	<?php endif; ?>
</article>

Open in new window


Screen shot attached. Any help is appreciated.

Screen Shot
Thanks.
0
Lanmarkian
Asked:
Lanmarkian
1 Solution
 
rgranlundCommented:
I did a quick search for "Wordpress set featured image as background image" and a bunch of things came up.

This one stuck out as probably what you are looking for. (At the bottom)
http://wordpress.org/support/topic/using-this-code
0
 
Julian HansenCommented:
I am not clear on what you are trying to acheive - the image (I am assuming we are talking about the one that says Star Dental in it - seems to be a background already - or is there content that is supposed to be overlayed on that image?

To make this a background requires one of two approaches

1. Instead of including the image in the markup you need to use CSS to style the box to have the required background

2. You have to style the image to be positioned absolutely with a low z-index to force the other content to overlay it.

Which method you use depends entirely on your specific circumstances.

Can you confirm that the effect you are trying to achieve is to have the date and text (for example as shown in box 2) Overlaid on top of the image?
0

Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now