오버레이의 CSS 최소 너비가 가운데 위치에 고정 된 위치로

Question

페이지 중앙에 콘텐츠가 margin : auto를 사용하여 위치하는 페이지가 있고 같은 방법으로 중앙에 배치 된 배경을 추가하고 싶습니다. 내가 아래로 스크롤 할 때 배경이 나타나지 않습니다. 위치를 사용하는 데 의지했습니다.

그러나 왼쪽과 같이 놀기 때문에 콘텐츠를 중앙에서 배치하는 것은 큰 도전 과제입니다. x % 및 여백 - 왼쪽 : -y %는 악몽이며 모든 화면 해상도에서 잘 작동하지 않습니다.

마크 업은 간단하다 : 나는 많은 조합을 시도했습니다

.overlay 
{ 
    position: fixed; 
    top: 0; /* These positions makes sure that the overlay */ 
    bottom: 0; /* will cover the entire parent */ 
    left: 0; 
    width: 72%; 
    margin-left:14%; 
    height:100%; 
    background: #000; 
    opacity: 0.45; 
    -moz-opacity: 0.45; /* older Gecko-based browsers */ 
    filter:alpha(opacity=45); /* For IE6&7 */ 
} 

:

<div id="main" class="container"> 
    <div class="overlay"></div> 
    <div id="content"></div> 
</div> 

당신은 내가 생각 해낸 베스트 CSS 구성이있는 사이트 HERE

를 볼 수 있습니다 그러나 배경은 항상 내용과 다르게 크기가 조정되고 나는 그것이 제자리에 머물러 있기를 원할 것입니다. 위치 : 절대 값 여백 : 자동 스크롤 기능은 스크롤을 제외하고는 완벽하게 작동합니다.

위의 구성은 "최소 너비"를 제외하고는 훌륭하게 작동합니다. 특정 지점 이후에 최소화를 중지 할 수 있다면 완벽 할 것입니다. 사전에

많은 감사이

Answer 1

에 대한 해결책이 대신 스타일링 목적을 위해 빈 마크 업을 사용하여 배경 background-attachment: fixed를 사용할 수있는 경우. 이런 식으로 페이지를 스크롤하는 경우에도 볼 수 있습니다.