Для сохранения качества фоновой картинки при растяжении ее на всю ширину окна браузера вам потребуется использовать CSS свойства background-size и background-repeat.
Свойство background-size позволяет контролировать размер исходного изображения фона. Чтобы сохранить качество изображения, можно использовать значение background-size: cover. Это значение масштабирует изображение таким образом, чтобы оно полностью покрывало фоновую область, сохраняя при этом свои пропорции. Однако, в результате изображение может быть обрезано.
Свойство background-repeat используется для указания повтора фонового изображения. По умолчанию значение background-repeat: repeat, что означает повторение изображения по вертикали и горизонтали. Чтобы изображение не повторялось, а заполнило всю ширину окна браузера, нужно использовать значение background-repeat: no-repeat.
Пример кода, показывающий использование этих свойств:
body {
background-image: url('фоновая_картинка.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
В этом примере мы устанавливаем фоновую картинку для элемента body с помощью свойства background-image. Свойство background-size устанавливает размер изображения на cover, чтобы оно полностью заполнило фоновую область. Значение background-repeat установлено на no-repeat, чтобы изображение не повторялось. И, наконец, свойство background-position устанавливает позицию изображения в центре фоновой области.
Таким образом, при использовании данных CSS свойств вы сможете сохранить качество изображения фоновой картинки при растяжении ее на всю ширину окна браузера.