Почему при background-attachment:fixed фон не следует за вию портом?

Когда вы устанавливаете значение background-attachment: fixed на элемент с фоновым изображением в CSS, фоновое изображение остается неподвижным относительно окна просмотра, то есть оно не будет прокручиваться вместе с содержимым страницы.

Это значит, что когда пользователь будет прокручивать страницу вниз или вверх, фоновое изображение останется на месте, вне зависимости от положения контента. Это создает эффект "закрепленного" фона, который остается на видном месте независимо от того, как далеко пользователь прокручивает страницу.

Однако, при использовании background-attachment: fixed вы обнаружите, что фоновое изображение может не следовать за размерами видимой части окна просмотра, когда пользователь прокручивает страницу вниз или вправо. Это связано с тем, что фоновое изображение закрепляется относительно окна просмотра, а не относительно элемента, к которому оно применено.

Когда вы устанавливаете значение background-attachment: fixed, фоновое изображение прикрепляется к верхнему левому углу окна просмотра и не будет двигаться, когда пользователь прокручивает страницу. Это означает, что, если фоновое изображение имеет ширину или высоту больше, чем размер окна просмотра, оно может быть обрезано по размерам окна просмотра и не будет показываться полностью.

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

Например, чтобы фоновое изображение полностью охватывало видимую часть окна просмотра и не обрезалось, вы можете использовать следующий CSS-код:

background-attachment: fixed;
background-size: cover;

Это позволит фоновому изображению динамически изменять свой размер, чтобы оно всегда соответствовало размерам видимой части окна просмотра, независимо от того, как пользователь прокручивает страницу.