고정 된 위치에있는 신체 배경 이미지 만들기

Question

나는 이것을 사용하여 크기를 설정하고 일부 x-y 왜곡을 처리 할 수있는 추상 이미지에 잘 맞습니다.

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

그러나 콘텐츠가 아래쪽으로 확장됨에 따라 이미지가 반복되기 시작하므로이 기능이 작동하지 않습니다.

나는 트위터가 당신이 얼마나 아래로 내려 가도 아무런 변화가없는 하나의 이미지를 가지고 있다는 것을 알아 차렸다.

position: fixed 

내가 고정 된 배경 이미지와 위치에 사업부를 사용할 수 있지만, 그때는 함께 사용 the background-attachment propertybackground-size: 100%

Answer 1

과 결합 body 태그가 제공하는 자동 스케일링을 잃어 버릴 것 같은

그것은 작동 fixed 값

Answer 2

이제는 CSS3의 background-size 속성 덕분에 CSS를 통해이 작업을 수행 할 수 있습니다. 우리는 html 요소를 사용합니다 (적어도 브라우저 윈도우의 높이 이상이므로 몸체보다 낫습니다). 우리는 고정 된 중심의 배경을 설정 한 다음 cover 키워드로 설정된 배경 크기를 사용하여 크기를 조정합니다.

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