How to add featured image as background image

Hello.

Kindly share with us a link to your blog page.

Samuel.

Hi Samuel Elh,

Unfortunately I’m working locally so there is not link :-s

That is okay, then let us know the theme name if available

It’s a custom theme sorry…

[ Moderator note: code fixed. Please wrap code in the backtick character or use the code button. ]

---
<div class="medium-4 columns noPad" style="background-color:green">
                <div class="sectorPanel">
                    <? php
                    $post_id = 43;
                    $queried_post = get_post($post_id);
                    ?>
                    <h4 class="text-center primaryColor"><?php echo $queried_post->post_title; ?></h4>
                    <p class="text-center whiteColor"><?php echo $queried_post->post_content; ?></p>
                </div>
            </div>
---

This is the code (if it posts)

Hi!

That is fine, I was just checking to know which CSS selectors to apply. I take it as you are familiar with CSS, so add the following code to the bottom of your custom thene’s functions.php file:

add_filter('the_content', function( $content ) {

	global $post;
	$thumb = has_post_thumbnail() ? wp_get_attachment_url( get_post_thumbnail_id($post->ID) ) : false;

	if( $thumb ) : ?>

		<style type="text/css">
			#post-<?php echo $post->ID; ?> {
				background: transparent url('<?php echo $thumb; ?>');
			}
		</style>

	<?php endif;

});

Style the backgrounds further, such as adding background size, fixed scroll, etc.

Make sure your theme adds the post ID in the post container element, and other necessary classes, you might use theme check plugin..

Edit: Remember to use wp_get_attachment_url( get_post_thumbnail_id($queried_post->ID) ) to get the thumbnail URL.

Hi, thanks for your help but feeling stupid because it’s not worked and still not pulling anything through…

I’ve made sure all my posts have a featured image and yet note :-s

Have you looked through your code? inspect HTML through dev tools, there is a part where it says background: transparent url(' etc, it is just a matter of CSS selectors..

Or if you want to set the background for the h4, then this might be what you are after:

<h4 class="text-center primaryColor" style="background-image:<?php echo wp_get_attachment_url( get_post_thumbnail_id($queried_post->ID) ); ?>"><?php echo $queried_post->post_title; ?></h4>

Yeah I had another look and still nothing sorry, what I’m hoping to achieve is;

<div class="medium-4 columns noPad" style="background-image:url('FEATURED IMAGE HERE')">
                <div class="sectorPanel">
                    <? php
                    $post_id = 43;
                    $queried_post = get_post($post_id);
                    ?>
                    <h4 class="text-center primaryColor"><?php echo $queried_post->post_title; ?></h4>
                    <p class="text-center whiteColor"><?php echo $queried_post->post_content; ?></p>
                </div>
            </div>

Try:

<div class="medium-4 columns noPad" style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id(get_the_ID()) ); ?>')">
    <div class="sectorPanel">
        <? php
        $post_id = 43;
        $queried_post = get_post($post_id);
        ?>
        <h4 class="text-center primaryColor"><?php echo $queried_post->post_title; ?></h4>
        <p class="text-center whiteColor"><?php echo $queried_post->post_content; ?></p>
    </div>
</div>

Nope ??

Just shows up in the code as

background-image: url ('');

How about moving the query code to the top:

<?php
$post_id = 43;
$queried_post = get_post($post_id);
?>
<div class="medium-4 columns noPad" style="background-image:url('<?php echo wp_get_attachment_url( get_post_thumbnail_id($queried_post->ID) ); ?>')">
    <div class="sectorPanel">
        <h4 class="text-center primaryColor"><?php echo $queried_post->post_title; ?></h4>
        <p class="text-center whiteColor"><?php echo $queried_post->post_content; ?></p>
    </div>
</div>

YES!! That worked perfectly!

Thank you so much for your help and patience ??

Cool. it is alright. Have fun coding the rest of it, and kindly mark this as resolved if you feel it is.

Have a nice day!

Samuel

Resolved ??