Layer post title on top of image Wordpress featured thumbnail image

Question

I'm currently trying to layer a post title on top of the posts featured image but all I see at the moment is ");">" instead of the image.

The code I'm using is as follows:

<div style="width:609px;height:364px;background-image:url(<?php the_post_thumbnail(); ?>);"><h2><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2></div>

And here is the CSS for the H2 style

article h2 a{
background-color:#bf0c08;
color:#fff;
width:auto;
font-size:30px;
text-decoration:none;
padding:8px;
max-width:479px;
line-height:60px;}

Any idea where I'm going wrong? Also a solution would be awesome :)

You can see this on www.ridermagazine.co.uk

Answer 1

the_post_thumbnail() does not return the path of your image. Instead, it returns the complete HTML markup for that image.

You can use this instead:

$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ) ); echo $image[0];

If you want a specific size you can pass an additional parameter:

$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' ); echo $image[0];

You can either use a keyword for the size (thumbnail, medium, large or full), a size you defined with add_image_size, or pass an array with your desired size like so: array( 100, 200 )

Answer 2

the_post_thumbnail will echo the entire image tag. You can see it in the source of your site:

<div style="width:609px;height:364px;background-image:url(<img width=" 609"="" height="364" src="http://ridermagazine.co.uk/wp-content/uploads/2012/11/featuretest.jpg" class="attachment-post-thumbnail wp-post-image" alt="featuretest" title="featuretest">);"&gt;<h2><a href="http://ridermagazine.co.uk/?p=1">‘Gill’ promotes underage driving to young motorcycle enthusiast</a></h2></div>

You need the URL only. Use get_attachment_thumb_url instead. It doesn't echo so modify your code to do that-- `url(ID); ?>);