Post Thumbnail as Background Image

Place this code inside of the relevant Div

<div id="main" <?php      

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

}  ?>

Further reading WordPress Codex Alternate method:

<?php if (has_post_thumbnail( $post->ID ) ); ?> 

<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' ); ?>  

<div style="background-image: url(<?php echo $image[0]; ?>);">

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.