WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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{

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

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

share|improve this question
up vote 1 down vote accepted

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 )

share|improve this answer
That's sorta worked, it's tiled the thumbnail instead of inserting the full size image, check www.ridermagazine.co.uk to see what I mean. Cheers. – Dave Burns Nov 9 '12 at 15:36
I updated the answer to include the size parameter. – Daniel Nov 9 '12 at 15:41
Perfect! Thanks :) – Dave Burns Nov 9 '12 at 15:57

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); ?>);

share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.