Почему смещение фонового изображения ~ 25%, когда «background-attachment: local»?

Question

Может кто-то пожалуйста, помогите мне понять, почему это CSS:

<style type="text/css"> 
    html { 
     background: url(images/img.diary.1280.jpg) no-repeat center center local; 
     -webkit-background-size: cover; 
     -moz-background-size: cover; 
     -o-background-size: cover; 
     background-size: cover; 
    } 
    body { 
     font-family: 'alpha geometrique', fantasy, cursive, sans-serif; 
     background: none; 
    }... 

бы фоновое изображение «двигаться вверх» на ~ 25%, так что только нижняя ~ 75% от изображения показано, по сравнению с этим перемежаются "background:" line?

background: url(images/img.diary.1280.jpg) no-repeat center center fixed; 

, который показывает 100% изображения в пределах видового экрана (что я хочу)?

Я также пробовал «прокрутить», но имеет тот же эффект, что и «местный». Причина, по которой я не хочу использовать исправление, заключается в том, что при прокрутке окна элементы (бутстрап 4) прокручиваются, но фоновое изображение не делает его похожим на то, что элементы скользят сверху. Я предпочитаю элементы & изображение прокручивается вместе, что является реальной целью, которую я пытаюсь достичь.

Благодаря

Answer 1

Это связано с background-size: cover и соотношением сторон изображения. Покрытие увеличит размер изображения до тех пор, пока оно не будет покрывать как ширину, так и высоту, поэтому, если изображение является портретом, а окно является ландшафтом, оно увеличит размер изображения (поддерживая аспект), пока оно не станет таким же широким, как окно, которое делает его более высоким чем окно, и поскольку вы располагаете его по вертикали, верх и низ не будут видны. Попробуйте это:

html { 
    background: url(images/img.diary.1280.jpg) no-repeat center center local; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
    } 

Содержать это как наиболее подходящая, она будет увеличить (или уменьшить) размер изображения до самого большого размера, который помещается внутри окна.

Answer 2

Kudos Arleigh Hix для указания меня в правильном направлении.

Мне нужно было изменить background-position: center center на background-position: center top при сохранении background-attachment: local. Теперь у меня есть и поведение, которое я хочу.