Customize the Background Image of Each Page on Twenty Seventeen Theme

To put a specific background image on each page, you will have to use custom fields.

For the classic editor, the custom fields are below the editing window, but they are not displayed by default; you will have to click on Screen options (top right in the browser) then check Custom fields.

You wont find custom fields using Gutenberg Editor. But don’t worry, the feature is just deactivated.

There are three vertical dots at the top of the editor on the right. Click, scroll down to Options, then check Custom fields. You will have to click on Save and reload and tada! it works!

Add a custom field, name it, bgimg for example.

Enter the image url (or copy / paste from the media library). In the functions.php file, add the following lines:

function tsct_addPageBackground() {
  if ( is_page() ):
    $custom_fields = get_post_custom();
    $my_custom_field = $custom_fields['bgimg'];
    if ( !empty( $my_custom_field ) ):
      $bgImage = '.site-content {background-image: url('.$custom_fields['bgimg'][0].') !important;}';
      wp_add_inline_style( 'twentyseventeen-style', $bgImage );
add_action( 'wp_enqueue_scripts', 'tsct_addPageBackground', 11 );

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.