2012-08-23 6 views
9

내 페이지에는 너비와 배경이 100 % 인 2-3 개의 섹션이 있습니다. 전체 화면으로 열면 모든 것이 정상이지만 화면이 960 픽셀 (이 섹션의 내용 너비)보다 작 으면 배경 이미지가 전체 페이지가 아닙니다. 오른쪽 위 whis는 배경이 아니라 - 흰색입니다. 여기서 내가 무엇을 의미하는지 확인할 수 있습니다 : http://micobg.net/10th/CSS : 100 % 너비 및 배경?

+1

이 읽기 ​​: http://www.whatstyle.net/articles/48/css_tricks_1_100_percent_width_in_a_variable_width_container는 – diEcho

+1

당신은 할 수 있습니다 유용한 정보는 [stackoverflow.com/questions/2083831/css-background-image-does-not-fill-when-scrolling](http://stackoverflow.com/questions/2083831/css-background- not-fill-when-scrolling) – utsikko

답변

2

배경 최소 너비 사용 : 960px; 너비 대신 100 %; 건배

18

background-image을 적용한 요소에 background-size:100% 스타일을 추가하기 만하면됩니다. Firefox, Safari 및 Opera에서 작동합니다. 예를 들어 :

<style> 
.divWithBgImage { 
    width: 100%; 
    height: 600px; 
    background-image: url(image.jpg); 
    background-repeat: no-repeat; 
    background-size: 100%; //propotional resize 
/* 
    background-size: 100% 100%; //stretch resize 
*/ 
} 
</style> 
<div class="divWithBgImage"> 
    some contents 
</div> 
+0

이제 Chrome에서도 작동합니다. – Channel

3

this 문서에 대해서는, 당신은뿐만 아니라 cover를 사용하려면해야

html { 
    background: url(PATH_TO_IMAGE) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}