Solved

Display featured image as background image?

Posted on 2014-03-11
4
277 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 57

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

Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
CMD R or Page Refresh Resending Update Query Data from Form 8 48
How to close my php post page. 3 42
Link Stopped Working 7 33
Ajax success not firing alert 6 45
This article discusses four methods for overlaying images in a container on a web page
This article discusses how to implement server side field validation and display customized error messages to the client.
The purpose of this video is to demonstrate how to add AdSense Ads to a WordPress Website, and how to set up WordPress to automatically place Ads in Sidebars. This will be demonstrated using a Windows 8 PC. Log into your AdSense account. : Cli…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

752 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