Hide Background Image for a Specific Page in WordPress

WordPress gives you an option to add a background image to website. This option can be accessed from the customizer screen.

Click on appearances and then customize option.

The customizer screen will have an option to add a background image as shown below –

If the option is not there then check if your theme has support for it. The theme must have the following line in it –

add_theme_support( 'custom-background' );

If it is not there then add it ( put it in functions.php file of your theme ), the Background Image option will appear in the customizer screen.

After you add an image to the background this way, the image will appear in every page of your WordPress site.

This is how it works –

The theme support for custom background generates a stylesheet with the following code –

<style type="text/css" id="custom-background-css">
body.custom-background { background-image: url("CUSTOM IMAGE URL"); background-position: left top; background-size: cover; background-repeat: no-repeat; background-attachment: fixed; }
</style>

This stylesheet is put at the header of the post/page. And the CSS class custom-background is added to the <body> tag. The CUSTOM IMAGE URL should be replaced with actual image URL.

<body class="post-template-default single single-post postid-31 single-format-standard no-customize-support custom-background">

Note that your theme should have wp_head() function in header and body_class() function inside <body> tag for the custom background to work.

Removing the background image using get_header

Now suppose you want to hide/remove the image for a specific page.

The simplest way to do that is by using the get_header action hook callback function. The get_header hook can be used to remove the theme support for custom background which generates the background image option.

This hook fires just before the header.

add_action( 'get_header', 'remove_custom_theme_background_support' );
function remove_custom_theme_background_support() {
    if ( is_page() ):
        remove_theme_support('custom-background');
    endif;
}

In the code above, the callback function for get_header is remove_custom_theme_background_support which checks if the current post is a page and removes the theme support for custom background, thereby removing the background image.

To remove the background image for a specific page, just change the conditional check to look for the page id.

add_action( 'get_header', 'remove_custom_theme_background_support' );
function remove_custom_theme_background_support() {
    global $post;
    if ( is_page() && $post->ID == 2 ):
        remove_theme_support('custom-background');
    endif;
}

The example above is using the global $post to get the current post object. It then checks if the current post is a page and the id is 2 ( can be any id of your choice ).

The theme support for custom background is removed if the condition is met. The image will show for all other pages though.

There are also other ways to remove the background image for a specific page.

Removing the background image using wp_head

The wp_head() function prints scripts and other data in the front end of a theme. This is also a hook that is widely used by theme and plugin developers.

When this hook is used, the header output has already started, so the style that generates the class for custom background ( body.custom-background ) gets created.

add_action( 'wp_head', 'remove_custom_theme_support' );
function remove_custom_theme_support() {
    if ( is_page() ):
        remove_theme_support('custom-background');
    endif;
}

But the subsequent body_class() function will not insert custom-background class to <body> tag, because theme support for the same is already removed. So the background image will not display.

Removing the background image using body_class

The classes inside <body> tag are generated by the body_class() function. But this can be used as a filter hook also.

Using it as a filter hook, it is checked if the class custom-background (which generated the background image ) exists in the list of classes being added.

add_filter( 'body_class', 'remove_background_image_callback' );
function remove_background_image_callback( $args ) {

    if ( is_page() ):

        foreach( $args as $key => $value ) {
            if ( $value == 'custom-background' )
            unset( $args[$key] );
        }

    endif;
  
    return $args;
}

The callback function for this hook takes an array that represents the CSS classes being added to the body tag.

If the custom-background class is present then it is removed and the new list of classes is returned. Since the class is no longer present, the background image is also not displayed.

In this case also the body.custom-background style remains in header as the function body_class() is fired late after wp_head().

Finally

Note that all this code goes to functions.php file of your active theme if you want the feature to be theme specific or to a plugin file if you want the feature to be site specific.

Guide Wordpress