关于html中body标签和html标签的背景问题

html和body标签在设置背景时的问题

html和body在设置背景时和div有很明显的差别
比如
html{background-image: linear-gradient(white,black);
border: 1px solid red;
}
body{background-image: linear-gradient(black,white);
border: 1px solid blue;
}
这里用了边框来看body和html的情况，很明显背景被html的背景平铺填满了，但是html和body的大小并没有覆盖整个页面，那么后面这个背景是怎么来的呢？
现在把background-repeat: no-repeat;分别设置在body和html标签的样式上，我们发现body对背景完全没有影响，html标签决定了背景的样式。
现在我将html的样式去掉，只保留body的样式，发现背景就采用body样式平铺了，并且no-repeat，仍然有效。
那么现在我可以猜测，之所以html和body的背景效果和普通的div有如此多的不同，是因为视口在创建时底层除了html和body还有一层画布一样的背景。在body和html在默认透明的时候显示的是白色，一旦body或者html设置了背景以后，会优先将html的背景填充到画布上，显示方式和html的大小有直接关系，如果html的高度改变背景也会随之改变。
html
{background-image: url("./n.jpg");
background-repeat: no-repeat;
border: 1px solid red;
background-position-x: 50%;
}
body
{background-image: linear-gradient(black,white);
border: 1px solid blue;
height: 100px;
width: 100px;
}
那么现在我用图片做一个实验：
可以发现，图片的居中是对于视口而言的，如果改变视口的大小，图片依旧会保持水平居中。这样就可以确定虽然html是根节点，但是对于网页的层级来说，其实还有一层视口是独立与html和body的，这层背景画布受html标签和body标签的影响，优先接受html标签的属性，但是有具体长度和高度图片不受html标签大小的影响，但是会受到背景位置和背景平铺相关设置的影响。
如有错误，希望指正。