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

Question

[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' изображение отобразится полностью, но не растянется на весь экран.

Подскажите, пожалуйста, как правильно сверстать фоновое изображение в данной ситуации и в правильном ли напрвалении я двигаюсь вообще?

Answer 1

[Danila534]

Изменить размеры фона до 1920x1080
после...
background-size: cover;

либо

background-size: fixed;

Comments

[jurako]

Спасибо, попробую данным способом!

[Danila534]

jurako, Не за что.

[Максим]

Danila534, background-size: fixed; - не бывает же такого

[Danila534]

Много Чего, background-attachment*
Ошибся

[Максим]

Danila534, background-attach,emt фиксируется фон ....я имею ввиду backgrouns-zize: fixed не бывает - он измеряется в 100% 100%/ cover/contain и в единицах px