최대 너비의 전체 ​​화면 배경 이미지

Question

설명 된 첫 번째 기술인 here을 사용하여 브라우저와 비례하여 조정되는 "전체 화면"배경 이미지를 만듭니다. 이미지 컨테이너

내 CSS는 다음과 같습니다

.fs-img { 
    position: fixed; 
    top: 4.5em; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    background: url('image.jpg') no-repeat center center fixed; 
    background-size: cover; 
} 

그러나 나는 1200 픽셀의 내 사이트에 max-width을 설정하고 싶습니다. 물론 body 요소에 적용하면 position: fixed이기 때문에 이미지에 아무런 영향을 미치지 않습니다.

바닥에 고정 된 상태로 최대 너비의 전체 ​​화면 이미지를 표시하는 다른 방법이 있습니까?

여기 제가 테스트 할 demo 사이트입니다.

Answer 1

난 당신이 다음과 같은 스타일을 사용하여 원하는 것을 얻을 수 있다고 생각 :

.fs-img { 
    position: fixed; 
    top: 4.5em; 
    right: 50%; 
    bottom: 0; 
    left: 50%; 
    margin:0 -600px; 
    background: url(image.jpg) no-repeat center center; 
    background-size: cover; 
} 

Example