Solved

Display featured image as background image?

Posted on 2014-03-11
4
273 Views
Last Modified: 2014-04-12
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
Comment
Question by:Lanmarkian
4 Comments
 
LVL 7

Expert Comment

by:rgranlund
ID: 39921533
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
 
LVL 55

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39921613
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

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The viewer will learn how to dynamically set the form action using jQuery.

790 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question