Solved

Display featured image as background image?

Posted on 2014-03-11
4
271 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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses four methods for overlaying images in a container on a web page
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

930 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

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now