Featured image as background image

If you have a theme with the custom background image feature enabled it’s pretty easy to replace it with the featured image of your posts.

First you need to add the wp-head-callback-attribute to your add_theme_support('custom-background')-function:

add_theme_support( 'custom-background', array(
        'wp-head-callback' => 'change_custom_background_cb',
    ) );

This tells WordPress to use our function “change_custom_background_cb” to output the image.

Switch to featured image

function change_custom_background_cb() {
    $background = get_background_image();
    $color = get_background_color();
    if (is_single()) {
      $image = wp_get_attachment_image_src( get_post_thumbnail_id( get_the_ID() ), 'full' );
      if (isset($image[0])) {
      $background = $image[0];
      }
    }

    if ( ! $background && ! $color )
        return;

    $style = $color ? "background-color: #$color;" : '';

    if ( $background ) {
        $image = " background-image: url('$background');";

        $repeat = get_theme_mod( 'background_repeat', 'repeat' );

        if ( ! in_array( $repeat, array( 'no-repeat', 'repeat-x', 'repeat-y', 'repeat' ) ) )
            $repeat = 'repeat';

        $repeat = " background-repeat: $repeat;";

        $position = get_theme_mod( 'background_position_x', 'left' );

        if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
            $position = 'left';

        $position = " background-position: top $position;";

        $attachment = get_theme_mod( 'background_attachment', 'scroll' );

        if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
            $attachment = 'scroll';

        $attachment = " background-attachment: $attachment;";

        $style .= $image . $repeat . $position; //  . $attachment
    }
?>
<style type="text/css">
body.custom-background .site-header { <?php echo trim( $style ); ?> }
</style>

The important part here is the first lines (4-9); we check if it’s a single post and if that post has a featured image, and if it has we replace the regular background image.

Another important part is the css line at the bottom. In my theme i use the background image on my header element, so if you want your image on another element you have to change this part: body.custom-background .site-header.

The rest of the function configures the css snippet according to the settings on the custom background page.

If you don’t want those there you can safely remove them and keep all the styling inside your css (but then you can’t change them from inside WordPress). Read more about this at the WordPress Codex.

What else can you do?

• Have a folder of images? Display them randomly.
• Display different images based on the time of day.
• Or different images for different seasons.
• Be creative.