Friday, September 23rd, 2011 | Snippets, Web Dev, WordPress

WordPress Function to change Background to Featured Image

I needed this functionality, and decided to create a function. Since it was so easily digestable, I figured I’d just post it here.

Here’s the function

function set_post_background() {
	global $post;
	$bgimage = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), "Full");
	if (!empty($bgimage)) {
		return '<style type="text/css">body {background-image: url('.$bgimage[0].');}</style>';
	}
}

Here’s what it does:

  1. The featured image source is pulled from the post data
  2. If the featured image URL exists, the function prints a style tag that sets the body’s background-image to that url. If not, it doesn’t do anything.

Call this function anywhere in your theme like so:

<?php echo set_post_background(); ?>

And that’s it.

Futher Reading:

Filed Under: Snippets, Web Dev, WordPress

Discussion

  1. September 28, 2011

    Randall Addison says:

    I’m trying to use this to make the featured image on the post a background image within the div. my thought process is that I can “overlay” a constant frame. do you think this would work or should I try something else.

  2. September 28, 2011

    Joseph says:

    Randall,

    Yes, if my understanding of what you’re trying to do is correct, then this should work perfectly. You simply have to change what this function returns to target the right div. I would use a unique classname or ID so you don’t risk any other elements backgrounds being changed. For example, a div with the class content would not be nearly as unique as a div with an ID of #post-thumb-background.

    Hope that makes sense. Happy coding!

  3. October 12, 2011

    Joost says:

    Ah Thanks,
    exactly what i need.

Leave a Comment