Add WordPress Featured Image as Background Image

With WordPress, when you add a featured image to your page or post, the output of [php]<?php the_post_thumbnail(); ?>[/php] shows up like this:

<img src="" />

If you try adding the post thumbnail code to a DIV [php]<div style="background: url(<?php the_post_thumbnail(); ?>);">[/php] the output will be:

<div style="background: url(<img src="" />);"></div>

The above does not work. So I was in need of finding a great way to strip out the
[php]<img src="" />[/php] code and just be left with the absolute path to the image. I found a simple tutorial here that explains how to do this. In short, here’s all the code you need:

    global $post; 
    $src = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array( 5600,1000 ), false, '' ); 
<div style="background: url(<?php echo $src[0]; ?> ) !important;">Your site content here...</div>

The end result will be:

<div style="background: url(;"></div>