윈도우 크기 및 장치와 함께 CSS 배경 이미지 스케일을 얻는 방법

응답 성이 뛰어난 디자인 뷰포트에도 사용할 수있는 유체 템플릿을 설정하려고합니다. 그러나 지금은 브라우저 창 크기를 조정하려고하면 크기가 조정되지 않고 내 아이폰에 헤더 그래픽의 왼쪽 상단 부분 만 보입니다. 나는 1200px의 동일한 너비 인 주 래퍼 배경과 헤더 애니메이션 GIF를 가지고있다. 어떤 도움이라도 대단히 감사하겠습니다.윈도우 크기 및 장치와 함께 CSS 배경 이미지 스케일을 얻는 방법

뷰포트

<meta name="viewport" content="width=device-width, initial-scale=1">

CSS

body { 
    background-color: #B28D66; 
    margin: 0 auto; 
} 
#Wrapper { 
    max-width:1200px; 
    width:95%; 
    background-image: url(../img/background_main.jpg); 
    background-repeat: no-repeat scroll; 
    background-position: center top; 
    height: 2200px; 
    position: relative; 
    margin-top: 0; 
    margin-right: auto; 
    margin-bottom: 0; 
    margin-left: auto; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#Wrapper #Banner { 
    width: 100%; 
    height: 350px; 
    background-image: url(../img/animated-gif-header.gif); 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
#Wrapper #Content { 
    width: 75%; 
    margin: 0 auto; 
} 
#Wrapper #MainNav { 
    background-image: url(../img/nav_bar.png); 
    width: 100%; 
    height: 75px; 
    margin-top: -20px; 
} 
#Wrapper #MainNav ul { 
    margin-right: 100px; 

} 

#Wrapper #MainNav ul li { 
    float: right; 
    margin-top: 15px; 
    padding-right: 21px;

출처

2013-03-23 Djacksway

미디어 쿼리와 함께 다른 이미지를 전화로 시도해 보셨습니까? 동일한 이미지가 1400px 와이드 노트북 화면과 320px iphone 화면을 완벽하게 채울 것이라는 점은 비현실적입니다. – staypuftman

다음과 같은 방식으로 배경 크기 속성을 사용하십시오 :

배경 사이즈 : 100 % 자동;

또는 높이 전체 페이지 높이를 덮고있는하려면 아래를 사용

배경 크기 : 자동차 100 %;

출처

2013-03-23 15:03:42

background-size: cover;

작품 나를 위해 잘.

출처

2013-12-09 06:39:57

background-image: url(''); 
background: no-repeat center center cover;

일반적으로 정상적으로 작동합니다.

출처

2014-05-21 10:30:50

윈도우 크기 및 장치와 함께 CSS 배경 이미지 스케일을 얻는 방법

답변

관련 문제