Custom background for the index page only?

Question

I am stuck at add_custom_background.

I can change background color/image but I only want to change my index page. Currently, the changes apply on the whole page.

I want to make the changes from WP-admin.

How can I specify it to a specific page ?

Edit:

I just checked im running 3.3.1. So my version is not supported to use add_theme_support( 'custom-background' );

instead I want to use add_custom_background.

  if ( is_front_page() )
{
   add_custom_background();
}

Cant get it to work.

Answer 1

You can check in your callback function if you are an the front page.

Sample code for the theme’s functions.php:

add_action( 'after_setup_theme', 'wpse_67480_theme_setup' );

function wpse_67480_theme_setup()
{
    $bg_options = array (
        'wp-head-callback' => 'wpse_67480_background_frontend',
        'default-color'    => 'f0f0f0',
        'default-image'    => '',
    );
    add_theme_support( 'custom-background', $bg_options );

    add_theme_support(
        'custom-header',
        array (
            'width'       => 960,
            'height'      => 200,
            'flex-height' => TRUE,
            'flex-width'  => TRUE,
            'header-text' => FALSE,
            'wp-head-callback' => 'wpse_67480_header_frontend',
        )
    );
}

wpse_67480_background_frontend()
{
    if ( is_front_page() )
    {
        _custom_background_cb();
    }
}

wpse_67480_header_frontend()
{
    if ( ! is_front_page() )
    {
        return;
    }

    // create your header code here
}

Answer 2

You can use the body class and define your background in your style.css

Example: background for frontpage:

body.home { background: #eee; } 

background for pages

body.page { background: #ccc; }

background for archive pages

body.archive { background ... }

and so on. Just check your source code for the body class of the site you want to address.

If your background is for another element but body you can add the body class in front of it:

body.home .wrapper { background ... }