Сделал следующее.
В HTML пишу
<link rel="preload" href="./img/fon.jpg" as="image" crossOrigin="anonymous">
В CSS имею
body {
background-color: #eeeeee;
min-height: 100vh;
}
@media screen and (min-width: 768px) {
body {
background-image: linear-gradient(to right, rgba(250,250,250,0.9) , rgba(250,250,250,0.6)), url("./../img/fon.jpg");
background-position: center, center;
background-repeat: no-repeat, no-repeat;
background-size: cover, cover;
background-attachment: fixed;
}
}
Получается некоторая фигня. с одной стороны хочется, что бы картинка фоновая быстрее загрузилась. С другой стороны на маленьких экранах, где она не нужна (в том числе и на смартфонах) она все равно будет грузиться.
Есть опыт какого-нибудь нормального решение этой проблемы?
Все. Вопрос снят. Поленился до конца документацию дочитать! Бывает.