I'm having trouble implementing a way of using the set WordPress post thumbnail as a background for a div which will include the whole post.

Basically, I need a way to call for the thumbnail URL in the index.php file. Something like this

<div style="background: url(<?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'normal-bg' ); } ?>) ">

Now what should happen is that the above would find a thumbnail for the post and use it as the background image. The thumbnail class would be "normal-bg", since there are thumbnail classes in my functions.php with different heights (since some posts can have more text etc.). However, I've been unable to make the above code work.

Sorry if the whole concept sounds confusing, it's a bit too hard to explain :)


    if ( $thumbnail_id = get_post_thumbnail_id() ) {
        if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) )
            printf( ' style="background-image: url(%s);"', $image_src[0] );     


Code should be pretty self explanatory - codex on wp_get_attachment_image_src.

As for how I've formatted it; I find this the cleanest, easiest to read, without outputting unnecessary whitespace:

<div style="background-image: url(http://example.com/wp-content/uploads/normal-bg.jpg);">
  • That gets the job done, thanks. There's just one little caveat: I'll have to call the thumbnail size without editing the file, as there will be posts with different heights, e.g. there will be a "large-bg". Would it be possible to do something like that through WP custom fields, implemented with your code? Thanks again! – Bill Aug 9 '12 at 23:49
  • Sure - either use WP's built-in "Custom Fields" or write your own metabox for the post edit screen to allow a user to specify the size, and then pass it as the size parameter in your thumbnail call: get_post_meta( $id, 'meta_key_for_thumb_size', true ) – TheDeadMedic Aug 10 '12 at 0:43
  • So with that code, I'll need a custom field named "meta_key_for_thumb_size" with the value of the thumb id (e.g. "normal-bg")? Can you please post the full code, as my php isn't too advanced. Thanks again for the help! – Bill Aug 10 '12 at 2:22
  • Just use the built-in custom fields UI - otherwise if you want things a little slicker, a plugin like Advanced Custom Fields will do the hard work for you. As for the meta key, that was purely an example; it can be anything of your choosing. – TheDeadMedic Aug 10 '12 at 8:16
  • Custom fields will do. Can you post the full code snippet for the div, with the get_post_meta part? – Bill Aug 10 '12 at 22:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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