[Resolved] Featured image on single post as div background.

[Nick]

I use featured images for my posts and they show up on the single post pages. What I would like to do is set the featured image on the single post pages as the background of a div so that they are a uniform aise. If the image is smaller than the containing div, I would like a different part of the image to be revealed as the page is scrolled.

Basically, I want to replace this:

<div class="page-header-image-single grid-container grid-parent">
<img src="featured-image-url>
</div>

with this:

<div class="page-header-image-single grid-container grid-parent" style="background-image" featured-image-url">

[Tom]

Something like this might help: http://wordpress.stackexchange.com/questions/115954/featured-image-as-background-image-on-pages

So you could write some CSS in the wp_head hook in GP Hooks like this:

<?php 
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );

if ( $thumb && is_single() ) {
    ?>
    <style>
        .whatever-element {
            background-image: url( $thumb );
        }
    </style>
    <?php
}
?>

Make sure you check the “Execute PHP” checkbox.

[Nick]

Thank you Tom, that did the trick.

At first the code snippet you provided didn’t exactly work. With the help of the link you provided, I was able to get it working.

I replaced
background-image: url( $thumb );
with

background-image: url('<?php echo $thumb['0'];?>')

and it worked perfectly.

I also added the following CSS so that the post image is hidden on the single page.

img.wp-post-image {
     display: none;
   }

Ultimately, my final code snippet looks like this:

    <?php 
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );

if ( $thumb && is_single() ) {
    ?>
    <style type="text/css">
        div.page-header-image-single {
            background-image: url('<?php echo $thumb['0'];?> ');
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-position: top;
	    width: 100%;
	    height: 300px;
            margin: 0px;
        }
        img.wp-post-image {
            display: none;
        }
    </style>
    <?php
}
?>

Thank you again for your help. The add-on made it very easy.

[Tom]

Ah, of course – that’s what happens when you provide code at midnight 🙂

Glad you got it sorted out – thanks for posting the code!

[Wim]

Just passing through the comments as I was merely looking for the same thing.
I got your solution working, but there’s an extra catch: the image must be blurred.
Came across the same effect on wpclips for genesis: http://clipbank.wpclips.net/clips/genesis-bg-featured-img-fx/ and that’s exactly what I was looking for, but for generatepress.
The problem I have is that everything is blurred, except the background image.
I guess a container must be added just after the body?
Could you help me out on this?
Thanks.

[Tom]

Hi there,

I’m not too sure what you mean? Can you show me an example of the blurred image?

[Wim]

Hi Tom, thanks for replying.
I followed the demo on http://demos.wpclips.net/templates/genesis-bg-featured-img-fx/ and found a solution.
Just hook a div for the image in the wp_head, css add the featured image to it, flip and blur.

For those who are looking for something similar, here is the code. Don’t forget to execute php.

<?php 
$thumb = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );

if ( $thumb && is_single() ) {
    ?>
 <div class="bg-featured-image"></div>
    <style type="text/css">
       .bg-featured-image {       
            background-image: url('<?php echo $thumb['0'];?> ');
            background-attachment: fixed;
            background-size: cover;
            height: 100%;
            position: fixed;
            width: 100%;
            z-index: -99;
            -webkit-filter: blur(10px) brightness(110%);
            filter: blur(10px) brightness(110%);
            -ms-transform: scale(-1.1,1.1);
            -webkit-transform: scale(-1.1,1.1);
            transform: scale(-1.1,1.1);   
            margin: 0px;
        }
    </style>
    <?php
}
?>

[Tom]

Awesome, thanks for posting the solution 🙂

[Author]

Posts