Как сделать background-image на весь экран, при условии того, что будет видна вся картинка?

Question

[moneymakerXA]

Пробовал разные свойства, но выходит так, что background-image все равно не растягивается должным образом. Нужно, чтобы задний фон покрывал всю страницу сайта, при этом картинка отображалась на 100%, background-image: cover не помогло

Answer 1

[Арман Дендибаев]

background: url(image/bg.jpg) no-repeat center center fixed;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;

Comments

[Арман Дендибаев]

работает ?

[tommy_13]

и без префиксов достаточно

[Ярослав Иванов]

Арман Дендибаев: В чем разница между -webkit- и -o- ?

[Арман Дендибаев]

Ярослав Иванов: Этот код не мой и старый я иногда юзаю этот метод

[Ankhena]

Ярослав Иванов: webkit для webkit браузеров, -o- для старой оперы

[Сергей delphinpro]

Арман Дендибаев:

Этот код не мой и старый я иногда юзаю этот метод

ну зачем бездумно копировать-то?
посмотрели бы актуальную поддержку браузерами caniuse.com/#search=background-size
Как видим префиксы уже пару лет неактуальны.

[moneymakerXA]

Арман Дендибаев: Да, отлично, спасибо большое

[Stanislav Yaroslavtsev]

Не работает (

Answer 2

[Ivanq]

Вы скажите точнее, как нужно. У меня 3 варианта:

1. background-size: contain
Картинка показывается целиком, не искажаясь.
Пример

2. background-size: cover
Картинка заполняет все пространство, не искажаясь, но часть обрезается.
Пример

3. background-size: 100% 100%
Картинка заполняет все пространство, но искажается.
Пример