전체 페이지에 걸쳐 배경 이미지를 확장하십시오. 스크롤하지 않고도 끊기지 마십시오

Question

저는 웹 개발에 처음 접했지만 새로운 머리글/바닥 글을 디자인 할 때 뭔가를 깨달았습니다. 페이지를 가로 질러 뻗어있는 배경 이미지/색상을 가진 컨테이너에이를 래핑 할 때 웹 페이지의 창을 원하는 너비보다 작게 축소 한 다음 스크롤하여 건너 뛸 수없는 내용을 봅니다. 배경 이미지 컨테이너가 더 이상 크지 않습니다 (창의 내용이 오버플로 되어도 자동으로 창의 너비에 맞게 조정 됨). 그러면 배경 이미지 대신 공백이 표시됩니다.

예를 들어 http://www.stumbleupon.com의 홈페이지를 방문하십시오. 창을 축소 한 다음 오른쪽으로 스크롤하십시오. 갑자기 모든 배경 이미지가 사라졌습니다. 헤더, 시체, 모든 것. 평평한 기본 색상 위에 콘텐츠 만 표시됩니다.

해결 방법이 있습니까? 이것은 웹 디자인에서 무의미한 관심사로 무시됩니까? 나에게 상당히 관련이있는 것 같습니다. 특히 한 번에 여러 개의 탭/창을 보는 것과 같은 일을 할 때 또는 누군가 1024x보다 작은 해상도의 모니터를 사용하는 경우 (신 금지).

Answer 1

StumbleUpon은 방금 부주의했습니다. 컨테이너 div s. 그들은 폭이 100 % 인 컨테이너 div을 설정하고 그 안에는 div 헤더가 100 %로 설정되어 있습니다. 가시 창 너비에 뻗어 div

<div id="container" style="width:100%"> 
    <div id="header" style="width:100%"> 
     Header Content 
    </div> 
</div> 

용기. 서브 div은 그 너비 인 div의 너비까지만 늘어납니다. 헤더를 컨테이너 외부에 넣으면 div 페이지의 전체 너비까지 늘어납니다. 전체 폭 헤더의 예를 들어 http://smallhadroncollider.com :

<div id="header" style="width:100%"> 
     Header Content 
</div> 
<div id="container" style="width:100%"> 

</div> 

내 홈페이지를 참조하십시오.