@jurako

Как правильно задать фоновое изображение на весь экран, если размер макета и монитора отличны?

Здравствуйте!
Имеется PSD макет с размерами 1600px x 1200px.
Разрешение моего ноутбука - 1920px x 1080px.
Разрешение viewport'a в браузере 'Google Chrome' - 1536px x 864px.

Как я сделал:
фоновый слой в фотошопе сохранил через 'Export As' как картинку '.jpg' с расширением 1600px x 1200px (может быть уже тут я сделал что-то не правильно?)

Вопрос:
Как сделать, чтобы данное изображение полностью растягивалось на фон браузера с размерами 1536px x 864px?

Единственный способ, который у меня сработал, это если задать такой CSS стиль:
background-image: url('images/bg.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% 100%;

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

Подскажите, пожалуйста, как правильно сверстать фоновое изображение в данной ситуации и в правильном ли напрвалении я двигаюсь вообще?
  • Вопрос задан
  • 118 просмотров
Решения вопроса 1
@Danila534
Изменить размеры фона до 1920x1080
после...
background-size: cover;

либо

background-size: fixed;
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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