Setting background-color on body in admin page shows unexpected behaviour

[pamtbaau]

Using example from ​https://codex.wordpress.org/Plugin_API/Action_Reference/admin_enqueue_scripts

Reproducable code and steps

1. Add the following code to functions.php of theme

function load_custom_wp_admin_style() {
        wp_register_style( 'custom_wp_admin_css', get_template_directory_uri() . '/admin-style.css', false, '1.0.0' );
        wp_enqueue_style( 'custom_wp_admin_css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

2. Create file admin-style.css:

body {
   background-color: red;
}

Expected behaviour

I would expect that the background of the area right of the adminmenu will be coloured red.

Issues

1. The red color will only fill the initial space of the window shown in the browse. When scrolling down, the red background disappears. See attached images: admin-red.png and admin-red-scrolled.png
2. #adminmenuback is covered in the area where the body is been set to red. Below the intitial size of the window, adminmenuback is visible again. See same images.

Partial solution

1. No solution found
2. Adding z-index: 1 to #adminmenuback and #adminmenuwrap will fix the partial disappearance of the adminmenu. See image admin-red-scrolled-z-index.png

OS and Browser

Windows 8
Chrome 29.x
Internet Explorer 10

[pamtbaau]

Shows red background overlapping menu

[pamtbaau]

Show red background limited to initial size of window

[pamtbaau]

Shows result of setting z-index to adminmenu selectors

[helen]

I'm not sure I see how this is a bug? I'm sure there are all kinds of things you could add a background color to and get an ugly result.

[buffler]

Doesn't seem like a bug but there are a couple of ways to achieve the styling you're looking for pamtbaau -

You can override body's height with height: auto; min-height: 100% (in addition to whatever background color/image) to get what you're wanting with the first issue. Or, you can instead apply a background to #wpwrap, as it already has height: auto; min-height: 100%.

In core there's no need for z-index on the admin menu because there's no background applied to either body or #wpwrap. But yes, you can set #adminmenuback, #adminmenuwrap { z-index: 1 } as you already have with the second issue if you want body or #wpwrap to look better with a background applied.

In summary, starting your admin-style.css file with these rules should get you going:

.body {
  height: auto;
  min-height: 100%;
  background: /* whatever background styles you want here */;
}

#adminmenuback,
#adminmenuwrap {
  z-index: 1;
}

[pamtbaau]

I've only recently switched from Joomla! to WordPress and everyday I'm positively amazed... Even by the swiftness of your responses :-)

I appreciate the position of WordPress of knowing there is no background applied to body. I just didn't expect an element which should always be visible (in my opinion) to be below the body element by setting its index explicitly to -1.

Buffler, your suggestion works fine.

Thanks

[Makapaka]

problem with body height

[Makapaka]

problem with body height 2