Styling Featured Image as a div background

[Riavon]

As usual, I'm stuck on a PHP/code issue, after searching and trying different things for several hours I'm hoping a Genesis code guru can show me the (probably very simple) solution that's eluding me.

I've successfully created a new page template that works fine to place the "Featured Image" where I want it before the content-sidebar-wrap using this:

/*
Template Name: Featured Image at Top
*/

///Add featured image at top of page */
remove_action( 'genesis_after_post_title', 'the_post_thumbnail' );
remove_action( 'genesis_before_post_title', 'the_post_thumbnail' );
add_action( 'genesis_before_content_sidebar_wrap', 'the_post_thumbnail' );

genesis(); 

But, I need for the image to be placed as a background image inside a div "page-top-featured-image" which I've got styled in my CSS to background-size:cover so that the image takes up the full width of the 100% wide div. The way it is now of course just places the featured image at the actual image size. I've searched high and low and I've tried several different things, and I think I need to put something like

<div style="background: url('<?php wp_get_attachment_image_src(); ?>');">

in here somewhere, somehow. But I stink at PHP and coding, so unless I can find the exact thing I need, I get stuck. I'm sure it's so simple but after spending all day on this, my eyes are crossed. All I want to do is copy/paste the lines of code I need into this and get to work on the rest of the stuff on my list for this project.

Any help is greatly appreciated!

---

Twitter: @riavonentprises

[cehwitham]

This is untested but add something like this to your template file. You'll want to remove your previous code and remove the add_action you mentioned above.

`
ID ) ){
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' );
echo '';
echo '#page-top-featured-image {';
echo 'background-image: url(' . $image[0] . ');';
echo '}';
echo '';
}
}
add_action( 'wp_head', 'background_featured_image');
?>
`

What this does it checks that the post has a featured image, then finds the image ID for the full size image then gets the URL of the full size image. Then it echos out style tags into the section of the page to set the background image of your div.

Let me know how you get on and if you can provide a link, I'll check it. (it's late and I'm sleep deprived after 2 #WP10 meetups yesterday.

NB: I've presumed you're Div has an ID of page-top-featured-image not a class of page-top-featured-image is this correct? If not amend the selector to a . instead of a #

Chris

---

Twitter: cehwitham Web: cehwitham.com

[cehwitham]

The code tags seem to have messed it up a bit. I've pasted the code into a gist here:

https://gist.github.com/anonymous/5666744

---

Twitter: cehwitham Web: cehwitham.com

[Riavon]

Thanks so much for your help. It's especially appreciated knowing that you're sleep deprived! I plan to implement this later today, and when I do I will be sure to follow up to this post and let you know how it works out. 🙂

---

Twitter: @riavonentprises

[amymasson]

Thanks for this! Was just what I was looking for!

[warois]

Hello there,

big thanks to cehwitham. I am stuck with a similar problem and thought I found the solution with the above mentioned code, but it doesn't seem to work for my problem without altering it.
I am also trying to display the featured image as a background image, but on the front page for each post, not within the single post. A good example of this is the homepage of the theme "The Writer".
I did find this approach by mattspaeth in this forum, but this creates a new div with the background instead of changing the background image of the existing one.

After four days of trying and searching I am frustrated and hoping somebody could help me with this last step.

Thanks a lot in advance!

[Author]

Posts