브라우저 - 브라우저의 해상도에 상관없이 CSS- 배경이 초점을 맞 춥니 다

Question

바로이 링크로 이동할 때 : http://rawgallery.us/user/login 배경이 잘립니다. 이 브라우저 창에 상관없이 해결이 그림과 같아야합니다 http://rawgallery.us/CarlisleBackDropWallRoom.png

난 아직 CSS를 배우고, 그래서 작동 사방 배경을 충당하기 위해 가정 된이 코드를 사용 :

html { 
    background: url("CarlisleBackDropWallRoom.png") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 

을 내 #page는 다음과 같이 설정됩니다.

#page { 
    margin-left: auto; 
    margin-right: auto; 
    min-height:960px; 
    min-width:960px; 
    max-height:1200px; 
    max-width:1200px; 

} 

html 태그가 페이지 태그보다 우선합니까?

예를 들어 브라우저 창이 500x700 또는 1200x1500 인 경우 전체 배경 이미지를 어떻게 볼 수 있습니까?

감사합니다.

Answer 1

background-size:contain을 선호 할 수 있습니다. 이는 배경 이미지를 컨테이너의 너비와 높이를 모두 차지하지 않고 컨테이너에 맞 춥니 다. 가입일

MDN docs :

배경 화상을 유지하면서 가능한 한 큰 것으로 스케일되도록 지정 [ "포함"] 모두의 크기의 대응하는 치수와 동등 이하 또는 아르 배경 위치는 입니다.

다음

html { 
    background: url("/sites/default/files/imgs/CarlisleBackDropWallRoom.png") no-repeat center center fixed; 
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size: contain; 
} 

가 working example입니다 :

다음은 CSS입니다.

browser compatibility of background-size에 유의하십시오.