Как сохранить качество изображения фоновой картинки при растежении его на всю ширину окна браузера?

Question

[Вовэу ᅠ]

У меня есть шапка сайта, где наверху три кнопки меню, а сама шапка должна содержать картинку как фон, как я понял лучше искать в формате jpg, но когда я использую:

.header{
    display: flex;
    background: url(тут файл картинки) center top no-repeat;
    background-size: cover;
    margin: 0;
    justify-content: center;
}

Comments

[imko]

Ну либо грузить гигантский растр, или пачку для разных разрешений, вплоть до гигантского
Либо использовать вектор, если содержимое картинки позволяет переделать его в векторе

Answer 1

[Тимофей Шариков]

Как вариант, можно использовать в header тег img, добавить в него ваше изображение, а затем прописать к нему такой CSS:

.img {
    width: 100%;
    z-index: 1;
}

Затем родителю img пропишите overflow: hidden;
Также при помощи свойства position вы сможете перемещать это изображение.
Если мне не изменяет память, всему контенту в header нужно задать z-index: 2;.