Step 1
Install and activate Advanced Custom Fields
Step 2
Go to Custom Fields
Add a header_background field group in your site.
Step 3
// Adds custom image size for site header background image. add_image_size( 'header-image', 1600, 350, true ); add_action( 'wp_enqueue_scripts', 'custom_header_background' ); /** * Sets `header_background` as URL of .site-header. */ function custom_header_background() { // if we are not on a static Page, abort. if ( ! is_singular( 'page' ) ) { return; } // get the custom field's ID. $image = get_field( 'header_background' ); // URL of image custom field in a specific size. $url = wp_get_attachment_image_url( $image, 'header-image' ); if ( ! empty( $image ) ) { $css = ' .site-header { background-image: url( ' . $url . ' ) !important; }'; wp_add_inline_style( 'anchored', $css ); } }
Leave a Reply