Add this WordPress code snippet to your child theme’s functions.php file and start adding custom background images to your posts and pages today. This code uses a post’s featured image as its body background image.
This only works when a featured image is set. The regular background image is used when no featured image is set for a post or page.
add_action( 'wp_head', 'vr_set_featured_background', 99);
function vr_set_featured_background() {
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full, false );
if ($image_url[0]) {
?>
<style>
html,body {
height:100%;
margin:0!important;
}
body {
background:url(<?php echo $image_url[0]; ?>) #000 left top no-repeat;
background-size: 100% 100%;
}
/* Uncomment if the image hangs low in a Genesis theme */
/*.site-inner {
padding-top:0!important;
padding-bottom:0!important;
}*/
</style>
<?php
}
}Now you’ve added the code to functions.php you can set a unique background image for your posts by uploading a featured image in the regular way.
How it works
Line 1, add_action( ‘wp_head’, ‘vr_set_featured_background’, 99); , tells WordPress to insert our custom function into the WordPress function wp_head() and to run our function’s code with the priority we set.
Line 1 hooks an action into the wp_head action hook. wp_head inserts code between the <header></header> HTML tags. This is where we place metatags, CSS styles, and links to external style sheets, for example.
The action is our custom function vr_set_featured_background.
We have set the priority to 99 which means any code with a priority lower than 99 will run before our code and any code with a priority higher than 99 will run after our code. Because we are adding CSS between the <header> tags we use a low priority like 99 to make sure our code runs as late as possible; this prevents other styles overriding our styles.
The rest of the code is for our custom function
Details of the featured image are loaded into the array $image_url with
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), full, false );
This uses WordPress functions wp_get_attachment_image_src() and get_post_thumbnail_id() to get the URL (the image SRC) of the featured image.
wp_get_attachment_image_src() accepts three arguments:
- $attachment_id
- $size
- $icon.
wp_get_attachment_image_src( $attachment_id, $size, $icon );
$attachment
We use get_post_thumbnail_id() to fill the $attachment_id argument.
$size
Several resized versions of an image are created whenever an image is uploaded to the WordPress Media Library. The $size argument accepts any preconfigured image size by name (full, large, medium or thumbnail) or image size dimensions stated as pixel width and pixel height in an array ( e.g array(1000,800) ).
Our code uses the ‘full’ image size. You can use any size you wish.
To load the large image size we would use
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), large, false );
To load an image of size 1000px wide and 800px tall we would use
$image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), array(1000,800), false );
$icon
The icon is the media image that represents the attachment type. This can be set to either true or false. The default value is false.
The returned result
The result is an array loaded into $image_url.
- [0] => url
- [1] => width
- [2] => height
- [3] => boolean: true if $url is a resized image, false if it is the original or if no image is available.
We only need to worry about the url which is stored in $image_url[0]
The rest of the code
The rest of our custom function code only runs if a featured image URL is found. We check this by testing that $image_url[0] has a value. The test is if ($image_url[0]) {} . If a value exists our code sets the featured image as the background image for the HTML body tag.
body {
background:url(<?php echo $image_url[0]; ?>) #000 left top no-repeat;
background-size: 100% 100%;
}Comment below to tell us where you’ve used this code.
wpDiscuz