Title: Featured Image as CSS Background
Last modified: August 24, 2016

---

# Featured Image as CSS Background

 *  Resolved [Chudz](https://wordpress.org/support/users/chudz/)
 * (@chudz)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/)
 * Hello,
 * I am having some trouble with this woundering if maybe someone can help!
 * So I have set a featured image to my Blog page and in the template files I have
   the following:
 *     ```
       <?php if (has_post_thumbnail( $post->ID ) ): ?>
       	<?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'single-post-thumbnail' );
       		$image = $image[0]; ?>
       	<?php else :
       		$image = get_bloginfo( 'stylesheet_directory') . '/img/default-featured-img.jpg'; ?>
       	<?php endif; ?>
   
       	<div class="feature" style="background-image: url('<?php echo $image; ?>')">
       ```
   
 * It shows the default-featured-img.jpg but it can not seem to find the attached
   featured image that I set! so it is using the else section of the PHP.
 * Thanks

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/#post-6067077)
 * What file are you placing this code in? Can you temporarily add `var_dump( $post);`
   to see if `$post` has the appropriate data?
 *  Thread Starter [Chudz](https://wordpress.org/support/users/chudz/)
 * (@chudz)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/#post-6067159)
 * Thanks for the reply:
    `object(WP_Post)#117 (24) { ["ID"]=> int(59) ["post_author"]
   => string(1) "1" ["post_date"]=> string(19) "2015-04-27 19:15:38" ["post_date_gmt"]
   => string(19) "2015-04-27 19:15:38" ["post_content"]=> string(11) "The latest."["
   post_title"]=> string(20) "The latest blog post" ["post_excerpt"]=> string(0)""["
   post_status"]=> string(7) "publish" ["comment_status"]=> string(4) "open" ["ping_status"]
   => string(4) "open" ["post_password"]=> string(0) "" ["post_name"]=> string(20)"
   the-latest-blog-post" ["to_ping"]=> string(0) "" ["pinged"]=> string(0) "" ["
   post_modified"]=> string(19) "2015-04-27 19:15:38" ["post_modified_gmt"]=> string(
   19) "2015-04-27 19:15:38" ["post_content_filtered"]=> string(0) "" ["post_parent"]
   => int(0) ["guid"]=> string(65) "URL/Action-Harpenden-Physiotherapy/?p=59" ["
   menu_order"]=> int(0) ["post_type"]=> string(4) "post" ["post_mime_type"]=> string(
   0) "" ["comment_count"]=> string(1) "0" ["filter"]=> string(3) "raw" }`
 * The code is in the home.php file at the top: [http://pastebin.com/zQ276X6U](http://pastebin.com/zQ276X6U)
 * This is for the main blog page that lists all the posts, could this be the reason
   why?
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/#post-6067161)
 * What’s happening is that WordPress only calls `home.php` once, so `$post` never
   gets updated. You should put your code within the loop (probably at line 39 in
   your paste) after the call to `the_post()`, which will update the `$post` variable
   with the proper information for each post.
 * You could also put your code in `content.php`, if it exists, because you call
   that file on each iteration of the loop.
 *  Thread Starter [Chudz](https://wordpress.org/support/users/chudz/)
 * (@chudz)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/#post-6067167)
 * Thanks for the reply and the help 🙂
 * Unfortunatly while that did work its not what I wanted. When putting inside the
   loop it is pulling the featured image for each post on the page. I just want 
   it to pull the actual featured image for the blog page.
 * For example:
 * I have a blog page which lists all post. The blog page has a featured image I
   want this to show at the top of the blog page as a background image. At the moment
   it is showing each indivual post featured image. Hope that makes sense. I am 
   probably using the wrong code or somthing! I dont do much work with WordPress
   so im fairly new to it.
 * Thanks
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/#post-6067170)
 * Ah, I misunderstood what you were trying to do. In Dashboard > Appearance > Customize
   > Static Front Page, are you using “Your latest posts” or “A static page”?
 *  Thread Starter [Chudz](https://wordpress.org/support/users/chudz/)
 * (@chudz)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/#post-6067171)
 * Im using a static page 🙂 page name Blog and I also have a front-page set there
   also.
 *  [stephencottontail](https://wordpress.org/support/users/stephencottontail/)
 * (@stephencottontail)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/#post-6067172)
 * Does this code do what you’d like:
 *     ```
       <?php $posts_page_id = get_option( 'page_for_posts' ); ?>
       <?php if (has_post_thumbnail( $posts_page_id ) ): ?>
         <?php $image = wp_get_attachment_image_src( get_post_thumbnail_id( $posts_page_id ), 'single-post-thumbnail' );
         $image = $image[0]; ?>
       <?php else :
         $image = get_bloginfo( 'stylesheet_directory') . '/img/default-featured-img.jpg'; ?>
       <?php endif; ?>
   
       <div class="feature" style="background-image: url('<?php echo $image; ?>');">
       ```
   
 *  Thread Starter [Chudz](https://wordpress.org/support/users/chudz/)
 * (@chudz)
 * [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/#post-6067175)
 * Yes I think that has done it 🙂 thanks very much for the help

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Featured Image as CSS Background’ is closed to new replies.

 * 8 replies
 * 2 participants
 * Last reply from: [Chudz](https://wordpress.org/support/users/chudz/)
 * Last activity: [11 years, 1 month ago](https://wordpress.org/support/topic/featured-image-as-css-background/#post-6067175)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics