Post thumbnail as background

Ever figure this out? I’d like to know as well.

Yes, yes you can. Do something like this:

For example for the div that your using for that area you want the background.

<?php
$thumbnail = '';
if (function_exists('has_post_thumbnail')) {
    if ( has_post_thumbnail() ) {
         $thumbnail = get_the_post_thumbnail($post->ID,'thumbnail');
    }
}

Then in the div itself

<div style="background: url('<?php echo $thumbnail; ?>') no-repeat;">
   info inside of div.
</div>

Pretty simple huh?

Ah, that’s helpful. I’m much closer, thanks. The problem is that the call for the thumbnail also pulls in the width/height and alt tags. Stuff I don’t need (and that throw’s off the inline css). How can I strip that?

<?php $posts=query_posts('page_id=22');
if (have_posts()) : while (have_posts()) : the_post(); ?>

<?php
$thumbnail = '';
if (function_exists('has_post_thumbnail')) {
    if ( has_post_thumbnail() ) {
         $thumbnail = get_the_post_thumbnail($post->ID,'featured');
    }
}
?>

<?php endwhile; endif; ?>
<div style="background: url(<?php echo $thumbnail; ?>) no-repeat;>
<h3><?php the_title(); ?>:</h3>
<h4>Player's Name!</h4>
</div>

Which outputs this:

<div style="background: url(<img width="292" height="260" src="https://www.mydomain.com/wp/wp-content/uploads/2010/04/player-featured-292x260.jpg" class="attachment-featured wp-post-image" alt="" title="player-featured" />) no-repeat;>
<h3>Featured Skater:</h3>
<h4>Player's Name!</h4>
</div>

So if I could just easily strip everything before the http of the image and everything after, I’d be good to go.

<?php
$thumbnail = '';
// Get the ID of the post_thumbnail (if it exists)
$post_thumbnail_id = get_post_thumbnail_id($post->ID);
// if it exists
if ($post_thumbnail_id) {
$size = apply_filters('post_thumbnail_size', 'post-thumbnail');
$thumbnail = wp_get_attachment_image($post_thumbnail_id, $size, false, '');
}
if (!empty($thumbnail)) { ?>
<div style="background: url('<?php echo $thumbnail; ?>') no-repeat;">
<?php } else { ?>
<div class="no-thumbnail">
<?php } ?>

I’m pretty sure that will work and not add the html with it. Basically I looked at the function get_the_post_thumbnail inside wp-includes/post-thumbnail-template.php and looked how they were doing it.

found it out, here it is:

$post_image_id = get_post_thumbnail_id($post_to_use->ID);
		if ($post_image_id) {
			$thumbnail = wp_get_attachment_image_src( $post_image_id, 'post-thumbnail', false);
			if ($thumbnail) (string)$thumbnail = $thumbnail[0];
		}

$thumbnail will return the string path of the thumbnail

and make sure you use $post_to_use as either $post or whatever your passing to it

I’ve tried this solution and keep having this tiny problem – an issue with the quotes within the inline css.

I use the div code and I always get (with our without the image) this inside of the div as orphaned code: ) no-repeat;>

It ends the statement the second single quote and screws up the statement – what am I doing wrong?

Frumph – that’s a super useful bit of code, thanks for that.

Any chance you could post the code needed to use the post thumbnail image as a background image for the TITLE of the post? The H2, or maybe better if it was the background for the ‘a’ link for the title H2?
Thanks!

You could use this for the background images. Place in the loop,

<?php
$src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' );
?>

and your div with background:
<div style="background: url(<?php echo $src[0]; ?> ) !important;">text </div>

If you place outside loop, you get same image for each div. You may be like “duh” but it would have saved me a couple minutes.

Thanks Frumph – I am working on a project that this is perfect for and just tried it and it works awesome!

It works! Thanks Frumph