With WordPress, when you add a featured image to your page or post, the output of <?php the_post_thumbnail(); ?>
shows up like this:
<img src="https://www.mikejohnsondesign.com/images/cool-image-here.jpg" />
If you try adding the post thumbnail code to a DIV:
<div style="background: url(<?php the_post_thumbnail(); ?>);">
the output will be:
<div style="background: url(<img src="https://www.mikejohnsondesign.com/images/cool-image-here.jpg" />);"></div>
The above does not work. So I was in need of finding a great way to strip out the<img src="" />
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:
<?php 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(https://www.mikejohnsondesign.com/images/cool-image-here.jpg);"></div>