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>

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(); ?>">

2 Answers 2


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

<header class="intro-header" style="background-image: url('<?php the_post_thumbnail_url(); ?>')">
  • 1
    Oh my I didn't even realize there was a function that did that -- my answer is more complicated than it needs to be!
    – The Maniac
    Nov 1, 2016 at 17:38
  • 1
    Well, it did just appear as of WP v4.4. It's hard to keep track of all the little goodies that crop up in each release! (Which is awesome!) Nov 1, 2016 at 17:47
  • Done. Thank You. In 5 minutes I am posting one more doubt in another thread. please help. Thanks.
    – WordCent
    Nov 1, 2016 at 17:56

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


<header class="intro-header" style="background-image: url('<?php echo mytheme_get_image_url(); ?>')">
  • I like your answer also, but I am unable to select both the answers.
    – WordCent
    Nov 1, 2016 at 18:12
  • @WordpressNovice My answer isn't really correct -- the only reason I didn't delete it was for the explanation of the_post_thumbnail. No worries!
    – The Maniac
    Nov 2, 2016 at 21:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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