Set Image As Background of post

This is a future feature of the pro version.

You can definitely do it, you just need to target the element and write some CSS that will grab the featured image URL using PHP.

You can hook your CSS into the wp_head hook so you can include PHP in the CSS.

Let me know if you need more info ??

Thanks Tom and good to know you already planned this feature ahead.

Yes a simple example code to build on will do.

You could try something like this:

add_action( 'wpsp_before_wrapper','tu_featured_image_background' );
function tu_featured_image_background()
{
    $url = get_the_post_thumbnail_url( get_the_ID(), 'full' );
    if ( '' !== $url ) : ?>
        <style>
            .your-element {
                background-image: url( '<?php echo $url; ?>' );
            }
        </style>
    <?php endif;
}

• This reply was modified 8 years ago by Tom.

Thanks am trying it now.

Hi Tom it works but strangely they all have the same featured image as background from the first most recent post.
Am using the class of .wp-show-posts-inner and have deactivated the image from settings

Also the featured image URL don’t show; instead it returns the post title; when the wp-show post short code inserted into page.
Example :
`.wp-show-posts-inner {
background-image: url(https://example.com/post-title/);
}`

The issue with the same featured image occurs when I insert the code in the Blog Page Header Content. Am troubleshooting now and partly running in circles….

• This reply was modified 8 years ago by Ike Ten.
• This reply was modified 8 years ago by Ike Ten.
• This reply was modified 8 years ago by Ike Ten.

I Resolved it by using custom loop to call posts.

Thanks for the code suggestion.

It really showed me more creative ways to target elements.

Awesome! Glad you got it working ??