everydaychillguy
@everydaychillguy
люблю кодить, обожаю чиллить

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

У меня есть шапка сайта, где наверху три кнопки меню, а сама шапка должна содержать картинку как фон, как я понял лучше искать в формате jpg, но когда я использую:
.header{
    display: flex;
    background: url(тут файл картинки) center top no-repeat;
    background-size: cover;
    margin: 0;
    justify-content: center;
}
  • Вопрос задан
  • 44 просмотра
Решения вопроса 1
Sharikov-T
@Sharikov-T
Junior Fronted Developer
Как вариант, можно использовать в header тег img, добавить в него ваше изображение, а затем прописать к нему такой CSS:
.img {
    width: 100%;
    z-index: 1;
}

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы