Во первых.
В тег
<header> вообще никакой фон не добавляется (в т.ч. на десктопах)
<header id="masthead" class="site-header" style="background-image: url();background-position: center; " role="banner">
...
</header>
Фоновое изображение, которое мы видим, приходит с
<body>body.custom-background {
background-image: url(http:\/\/www.xn----ftbdbyd3b0cg4c.xn--p1ai\/wp-content\/uploads\/2016\/12\/1099364.jpg);
background-position: center center;
background-size: auto;
background-repeat: no-repeat;
background-attachment: fixed;
}
Т.к. фон примеряется ко всему документу (
<body>) ( у которого высота на мобильном устройстве 5000 - 6000px), размер указан auto, что примерно равно ширине экрана, а высота фона пропорциональна и сам фон не повторяется, то он позиционируется где-то посередине (2500 - 3000px) не видимой для нас области.
Как известно, background-attachment имеет проблемы на мобильных устройствах.
background-attachment прекрасно работает на десктопах, поэтому при инспектировании фон отображается правильно, в отличии от мобильных по описаной выше причине
Средний
Простой
