Surprisingly, the special treatment of the <body> element's background is intentional design.
The CSS documentation on csswg.org explains this concept:
When the root element of a document is an HTML or XHTML element: if the background-image value on the root element is none and its background-color is transparent, user agents are required to inherit the background properties from the first HTML BODY or XHTML body child element. The inherited values for the BODY element's background properties are considered as if they were specified on the root element itself. It's advised that authors set the canvas background on the BODY element rather than the HTML element.
This implies that any background properties applied to the <body> element will be extended to the entire user agent canvas unless you style the <html> element with a non-transparent background-color or background-image.
In essence, when encountering what may seem like odd behavior, especially during CSS debugging in Developer Tools, consider the following perspective:
The styling of the body element follows standard procedures like any other element.
As there isn't a direct HTML representation for the user agent canvas, the background styles on the root <html> element apply to the canvas. Nevertheless, designers allow for setting background properties on the <body> element instead of the <html> element, impacting not just the body but the entire canvas.
This approach may create confusion since the body's margin, padding, and borders differentiate it from the canvas. While the background handling may seem distinct, it actually relies on a technical rule that requires digging into the documentation to comprehend fully.