배경 이미지의 뷰포트가 가운데에 배치 되었습니까?

Question

내가 전에 같이 웹 사이트 처리,하지만 여기에 내가 달성하기 위해 노력하고있어입니다 적이 ...

나는 배경 이미지에 사용할 하나 개의 큰 이미지 (1000px x 1000px)가 있습니다. 콘텐츠 자체는 500px x 500px 주변에서만 사용되며 배경 이미지와 관련하여 항상 동일한 위치에 있어야합니다.

이 설명하기 복잡하다, 그래서 나는 사진을 만들 수 있습니다 : 그것은 어려운,하지만 브라우저 내 11보다 큰 경우가 될 것 같은

이 자체가하지 않는 것을 "화면이 너무 커서 브라우저가 배경 이미지보다 큽니다. 간단한 색상으로 표시하고 싶습니다.

다른 문제는 항상 나타나야하는 것처럼 스크롤 막대가 표시되지 않도록 항상 가운데에 배치하는 것입니다. 브라우저 창이 컨텐트 상자보다 작은 경우

나는 더 많은 것을 분명히 할 수 있는데, 나는 내가 성취하려는 것을 말로 넣는 데 어려움을 겪고있다.

Answer 1

사용 CSS를 : 여기에 당신이 수행 할 수 있습니다 무엇의 예입니다 background-color, background-image, background-position 및 background-repeat (순서대로)를

HTML{ width:100%; height:100%; 
     background:#F00 url(path/to/your/image.jpg) center center no-repeat; 
     background-attachment: fixed; 
     background-size:100% auto; 
} 

background 금액. 다른 두 개는 현재 background에 포함될 수 없습니다 (단, W3C 사양에는 달리 명시되어 있음).

background-attachment:fixed은 레이어에 대해 position:fixed과 비슷하며 사용자가 스크롤하는 방법에 관계없이 이미지가 계속 표시되도록합니다. 당신이 원하지 않는 경우, 콘텐츠 주위에 컨테이너를 포장하고 그것에 대신 HTML -node

background-size에 위의 선언을 지정 값으로 배경에 약간 재생 이미지 크기를 조정 - 내가 제안한 것 뷰포트 너비에 맞게 이미지의 크기를 조정합니다. 100% 100%은 항상 뷰포트 전체를 덮도록 늘리고 auto 100%은 뷰포트의 높이에 맞춰 크기를 조정합니다. auto를 사용하는 두 가지 경우 모두 약간의 클리핑이 발생할 수 있습니다 - 또는 배경 색 (나는 빨간색 선택) width:100%;height:100%가 만드는 HTML -node을 제공 & 바닥

상단 측면 /에 표시됩니다 확인 당신은 흰색 테두리가없는 귀하의 콘텐츠가 화면을 채우지 못할 경우 하단에

Answer 2

어떤 문제가 있는지 명확히 알 수 없습니다. http://jsfiddle.net/mhgdZ/