Создание фонового изображения тела с фиксированным позиционированием

Question

Я использую это, чтобы установить размер, и он хорошо работает для абстрактных изображений, которые могут обрабатывать некоторые искажения x-y.

body{ 
    background: url('foo/images/flowers.jpg'); 
    background-size: 100%; 
} 

Однако, поскольку содержимое расширяется вниз, это не работает по мере того, как изображение начинает повторяться.

Я заметил, что у twitter есть одно изображение, которое не меняется независимо от того, как далеко вы прокрутите вниз.

Он ведет себя как

position: fixed 

Я мог бы использовать DIV с фоновым изображением и положением фиксированного, но тогда я бы потерять автоматическое масштабирование, представленное body тега в сочетании с background-size: 100%

Answer 1

Использованием the background-attachment property с значение fixed.

Answer 2

Мы можем сделать это исключительно с помощью CSS благодаря свойству background-size в CSS3. Мы будем использовать элемент html (лучше, чем тело, поскольку оно всегда является по крайней мере высотой окна браузера). Мы устанавливаем на нем фиксированный и центрированный фон, затем корректируем его размер, используя размер фона, заданный для ключевого слова обложки.

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

Answer 3

Попробуйте это:

#element { 
    background: #fff url("http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Scitech/660/371/tardar-sauce-the-cat.jpg?ve=1"); 
    background-attachment: fixed; 
    background-repeat: no-repeat; 
} 

DEMO