배경 뷰포트

성가신 문제로 전용으로 넓은 내가 확대 된 때 내 뷰포트 창에서 내 배경 이미지가 배경 뷰포트

을 잘립니다, (파이어 폭스, 크롬에서 일어나는) 다음 오른쪽으로 가로로 스크롤

- 이미지가 뷰포트

것만큼이나 넓은

줌

에서 : 이미지 최고의 무슨 일이 일어나고 있는지 묘사

줌 탈출구 - 문제는 여기에

어떤 관련이있을 수 내 CSS에서 섹션입니다 발생하지 않습니다

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { 
    display: block; 
} 
body{ width: 100%; } 
header#header { width: 100%; } 
header#header #background-image { 
    height: 150px; 
    background: url(/images/header/silhouette.png) repeat-x; 
}

이와 너무 적용 cssgradients없이 일을 - 정말 여기에 난처했습니다

출처

2011-01-19 stephenmurdoch

당신이 시도 않았다 휴대용 사용자에게 최고의 솔루션을 제공하기 위해 현재 일부 미디어 쿼리를 추가하는 아마 최선의 실현 있지만, # background-image 너비도 100 %로 설정 하시겠습니까? – stecb

'header '나'figcaption'과 같은 것들이 HTML에서'body' 나'div'처럼 요소를 보지 못했습니다 ... 제대로 작동합니까? 그것의 클래스 또는 id 참조, 어쩌면 나는 tho를 놓친다. 난 CSS 스타일에서 한 번도 본적이 없다. – Jakub

해결책을 찾았으니 이제 가서 테스트 해봐야한다. :) 내 대답을 읽어보십시오. :) –

신체의 최소 너비를 설정하는 것입니다 :

body{ width:100%;min-width: 1002px; }

이 내가 아이폰뿐만 아니라이 모든 브라우저에서 문제를 해결 (iphonetester에 따라 나는 정말

출처

2011-01-19 16:24:22 stephenmurdoch

:)와 같이 이제 전체 게시물의 첫 번째 이미지를 업데이트해야합니다. 업데이트 된 대답에 포함 시켰습니다. :) 또한 다른 이미지를 포함합니다. 방법, 둘 다 작동하고, 몇 가지 팁과 tricls 있습니다. –

전설적인 답변, 감사합니다! 아무도 "1002px"인 이유를 알고 있습니까? –

@Webbo, 내 그림과 함께 작동했기 때문에 그 그림을 사용했습니다. :) YMMV – stephenmurdoch

배경 뷰포트

답변

관련 문제