post thumbnails - How to convert feature image as background image

admin管理员组

文章数量:1130349

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

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

• post-thumbnails

Share Improve this question edited Nov 15, 2018 at 13:08 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Nov 15, 2018 at 6:20 William JeromeWilliam Jerome 18366 silver badges1313 bronze badges 1

• 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>

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

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

• post-thumbnails

Share Improve this question edited Nov 15, 2018 at 13:08 fuxia♦ 107k3939 gold badges255255 silver badges461461 bronze badges asked Nov 15, 2018 at 6:20 William JeromeWilliam Jerome 18366 silver badges1313 bronze badges 1

• 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>

本文标签： post thumbnailsHow to convert feature image as background image