Dynamic Post Thumbnail →

Question

I have an HTML code here →

<!-- Page Header -->
    <!-- Set your background image for this header on the line below. -->
    <header class="intro-header" style="background-image: url('img/home-bg.jpg')">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
                    <div class="site-heading">
                        <h1> Clean Blog </h1>
                        <hr class="small">
                        <span class="subheading">A Clean Blog Theme by Start Bootstrap</span>
                    </div>
                </div>
            </div>
        </div>
    </header>

I was trying to convert this into WP dynamically.

How to convert this dynamically →

 <header class="intro-header" style="background-image: url('img/home-bg.jpg')">

style="background-image: url('img/home-bg.jpg') → How to convert this dynamically so that the image in the background should come from wordpress features image section.

I was trying this, but it didn't worked =

<header class="intro-header" style="<?php the_post_thumbnail(); ?>">

Answer 1

It sounds like you're looking for the_post_thumbnail_url():

<header class="intro-header" style="background-image: url('<?php the_post_thumbnail_url(); ?>')">

Answer 2

The function the_post_thumbnail returns the entire HTML for the image. You will need to use wp_get_post_thumbnail_id and wp_get_attachment_image_src in combination to get the image's url.

Here's a helper function I usually throw into functions.php when I'm building a theme to make this easier:

function mytheme_get_image_url( $size = 'full' ) {
    $image_data = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), $size );
    return $image_data[0];
}

Usage:

<header class="intro-header" style="background-image: url('<?php echo mytheme_get_image_url(); ?>')">