0

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(); ?>">
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(); ?>')">
| improve this answer | |
  • 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 '16 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!) – Dave Romsey Nov 1 '16 at 17:47
  • Done. Thank You. In 5 minutes I am posting one more doubt in another thread. please help. Thanks. – The WP Intermediate Nov 1 '16 at 17:56
0

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(); ?>')">
| improve this answer | |
  • I like your answer also, but I am unable to select both the answers. – The WP Intermediate Nov 1 '16 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 '16 at 21:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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