Здравствуйте!
Имеется 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' изображение отобразится полностью, но не растянется на весь экран.
Подскажите, пожалуйста, как правильно сверстать фоновое изображение в данной ситуации и в правильном ли напрвалении я двигаюсь вообще?
Простой
Простой
