Solved

Display featured image as background image?

Posted on 2014-03-11
4
278 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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 58

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

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

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

Since pre-biblical times, humans have sought ways to keep secrets, and share the secrets selectively.  This article explores the ways PHP can be used to hide and encrypt information.
This article shows the steps required to install WordPress on Azure. Web Apps, Mobile Apps, API Apps, or Functions, in Azure all these run in an App Service plan. WordPress is no exception and requires an App Service Plan and Database to install
The purpose of this video is to demonstrate how to prevent comment spam on a WordPress Website. This will be demonstrated using a Windows 8 PC. Plugin Akismet will be used. Go to your WordPress login page. This will look like the following: myw…
The purpose of this video is to demonstrate how to set up the permalinks on a WordPress Website. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Go t…

626 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