Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Posted by inakicalvo
inakicalvo
23,166 Points

How can I set up the featured image of a page as the background image of the site in Wordpress with Genesis framework?

Hi there,

I need to set up the featured images of pages as background images for a site build in Wordpress using the Genesis Framework. To be precise, I'm trying to customize Atmosphere Pro theme.

I could handle the CCS to customize how the image should look, but I'm lost with the PHP…

Can anyone give me a hand?

Thanks in advance!

1 Answer

Daniel Botta
Daniel Botta
17,956 Points
Daniel Botta
Daniel Botta
17,956 Points

I usually just add the image as css by inlining it in the html and I use the follow php the generate the URL to the image.

<?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'full' ); $url = $thumb['0']; ?>

The second parameter in the function can be whatever size you want such as small, medium, thumb, etc...Then you can inline the image as a background image like so:

style="background: url('<?php echo $url; ?>');"

There may be a better way that I am not aware of, but this always works for me. I hope this helps.