2013-12-10 2 views
2
body { 
    margin:0; 
    padding:0; 
    position:relative; 
    background:url(../images/imgs/backgrnd.png) no-repeat; 
    background-size:cover; 
} 

대부분의 및 크기 조정을위한 완벽한 장소 background-size:cover 작품에 공백을 떠나는 것은 일반적으로 문제가되지 않지만 경우에 따라서는 페이지 하단에 아래 큰 흰색 스트립 잎 일부 크기 조정.
배경은 1920x1080입니다.CSS3 배경 - 크기 : 커버가 크기 조정

답변

5

확실하지 않음 Google이 도움이 될 수 있었습니까? UI 팀에서 일하는 사람과 이야기를 나눴는데 웹 페이지의 본문이 반드시 페이지의 전체 높이를 차지하는 것은 아닙니다. 내 CSS 파일에 다음을 추가하면 문제가 완전히 해결되었습니다.

html { 
    height: 100%; 
} 

body { 
    background-size: cover; 
    height: 100%; 
} 

이렇게하면 본문의 내용이 창 전체 높이에 맞게 늘어납니다. "몸"비트를 포함시키는 것만으로도 효과가 있었지만 일부 동료가 하나만으로도 재미있어 졌기 때문에 두 동료를 모두 포함하는 것이 좋습니다.

+0

와우 이것은 오래된 것입니다! 응답 해 주셔서 감사합니다. 높이 : 100 % 및 너비 : 100 % (배경 크기 : 표지); 잘 작동합니다. 높이와 너비를 분리하는 것에 대한 흥미로운 점은 이전과 마찬가지로 몸에 붙이는 것입니다. – joe

3

이 문제를 해결하려면 overflow:auto;을 추가하십시오. 이 도움이 예를 들어

,

body { 
    margin:0; 
    padding:0; 
    position:relative; 
    background:url(../images/imgs/backgrnd.png) no-repeat; 
    background-size:cover; 
    overflow:auto; 
} 

희망.

0

아마 당신도 사용해 볼 수 있습니다 :

background-size:100% 100%; 

단지 제안

이 문제를 해결하지만, 내가 일 아무것도 I의 몇 위에 내 머리를 찢어 경우