post thumbnails - How to convert feature image as background image|Programmer puzzle solving

I am trying to set background image out of feature image so I used the background-size:cover. Here is the code I have done but how can I add feature image into <div class="bg-img" style="background:...">. How can I achieve background image technique.

if ( $post->post_parent )
    $post_id = $post->post_parent;
else
    $post_id = $post->ID;

if ( $thumbnail = get_the_post_thumbnail( $post_id, 'post-thumbnail' ) ) {
    echo $thumbnail;
}

if ( $post->post_parent )
    $post_id = $post->post_parent;
else
    $post_id = $post->ID;

if ( $thumbnail = get_the_post_thumbnail( $post_id, 'post-thumbnail' ) ) {
    echo $thumbnail;
}

Share Improve this question edited Nov 15, 2018 at 13:08 fuxia♦ 107k39 gold badges255 silver badges461 bronze badges asked Nov 15, 2018 at 6:20 William Jerome 1836 silver badges13 bronze badges

1 You can use get_the_post_thumbnail_url() for get image url and put into <div class="bg-img" style="background:PHP VARIABLE HERE"> – Pratik Patel Commented Nov 15, 2018 at 6:24

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

please use this code

<?php $backgroundImg = wp_get_attachment_image_src( 
   get_post_thumbnail_id($post->ID), 'full' );?>

 <div class="header-wrap" style="background: url('<?php echo $backgroundImg[0]; ?>') no-repeat;">

 <header class="entry-header">

 <h1 class="entry-title">
 <?php the_title(); ?>
 </h1>

 </header>

Programmer puzzle solving

post thumbnails - How to convert feature image as background image

1 Answer 1

Articles related to this article

comment list (0)