[Kathleen]

Hi. I’m trying to set the ‘Featured Image’ of a single page/post on my site as the background image for that single page, and have any text or content I add to the page be visible *on top* of that background image.

I’ve been looking at ways to customize the single.php file to accomplish this, for example:

<?php $backgroundImg = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘full’ );?>

<div class=”header-wrap” style=”background: url(‘<?php echo $backgroundImg[0]; ?>’) no-repeat;”>
<header class=”entry-header”>
<h1 class=”entry-title”><?php the_title(); ?></h1>
</header>
</div>

This is my site: http://www.communitypartnersnh.org

Any suggestions would be welcome! Thank you.

Kathleen

[Mahesh]

@infocommunitypartnersnh-org: You mean the full background or just the background of the article? Let me know further.

Regards,
Mahesh

[Kathleen]

Hi Mahesh. Thanks for your reply!

I’d like to be able to set the ‘Featured Image’ of a single page as the background of the article and content on that single page. In other words, the overall website background image (entire site background) would still be there, but in place of the white background of the specific post or article would be the ‘Featured Image’ for that specific page/post, and then any article or page/post content (text and small images) would appear on top of the ‘Featured Image’ for that specific page/post.

I’ve attached a visual representation so you can see exactly what I mean.

Thanks so much for your help!

Katherine

[Mahesh]

@infocommunitypartnersnh-org: For this, you’ll need to create a child theme. You can find more details on creating child theme HERE. Then in your child theme, create a file name it content-page.php and paste the code from the following link.
http://bit.ly/2npv78B

Regards,
Mahesh

[Kathleen]

Thank you Mahesh! I am studying those links now…really appreciate your help! Kathleen

[Kathleen]

Hi Mahesh,

I wanted to follow up and let you know that your suggestion worked, with a caveat: while I *can* now set a single page ‘Featured Image’ to serve as the visual backdrop or background within the page/post space, it always appears blurry, no matter what the original size and clarity of image I use. My web research suggested this is because Catch Box Pro is a ‘Responsive’ site, and the ‘Featured Image’ is being scaled or resized when it loads, causing the blurriness or lack of clarity. Can you suggest any workarounds that will retain the ‘Featured Image’s original quality/clarity and prevent it from becoming blurry?

Thank you!

Kathleen

[Mahesh]

@infocommunitypartnersnh-org: Can you please post in the site url with the background for demo.

Regards,
Mahesh

[Kathleen]

Hi Mahesh, thanks for your response! I think I figured this out…experimented with different size Featured Image background sizes and file formats. PNG 940×1400 seems to work best. Image quality/clarity is now much better. Thank you! Kathleen

http://www.communitypartnersnh.org/?page_id=1597&doing_wp_cron=1491479392.5642158985137939453125

[Mahesh]

@infocommunitypartnersnh-org: Glad to know about it. Let me know if any problem. Have a nice day!

Regards,
Mahesh

[Author]

Posts