CSS 배경 이미지가 이미지의 크기보다 매우 작음

Question

상자 F의 배경 이미지가 이미지의 크기보다 매우 작게 나타납니다. 여기

<style type="text/css"> 
#boxA, #boxB, #boxC, #boxD, #boxE, #boxF { 
float:left;padding:10px;margin:10px;-moz-user-select:none; 
} 
#boxA { background-color: #6633FF; width:75px; height:75px; } 
#boxB { background-color: #FFFFFF; width:175px; height:200px; } 
#boxC { background-color: #66FFFF; width:75px; height:75px; } 
#boxD { background-color: #6600FF; width:75px; height:75px; } 
#boxF { background-image: url("http://www.wesellcoffee.com/media/large%20platter%2011.jpg"); 
    background-size:100%; 
background-repeat: no-repeat; 
} 
#boxE { background-color: #60330F; width:75px; height:75px; } 
</style> 

따라서는 0의 폭과 0의 높이를 가지고 있으며, 그것이 가지고있는 유일한 크기는 모든 것을 준 10px 패딩입니다, 당신의 #boxF 사업부가 비어있는, 물론 Fiddle

Answer 1

입니다. 그냥에게 폭과 높이를주고 # boxF`가 자신의 너비/높이가없는`때문에 그것의 제로 사이즈 (플러스 패딩 플러스 마진을 취 see fiddle

#boxA, #boxB, #boxC, #boxD, #boxE, #boxF { 
    float:left; 
    padding:10px; 
    margin:10px; 
    -moz-user-select:none; 
} 
#boxA { 
    background-color: #6633FF; 
    width:75px; 
    height:75px; 
} 
#boxB { 
    background-color: #FFFFFF; 
    width:175px; 
    height:200px; 
} 
#boxC { 
    background-color: #66FFFF; 
    width:75px; 
    height:75px; 
} 
#boxD { 
    background-color: #6600FF; 
    width:75px; 
    height:75px; 
} 
#boxF { 
    background-image: url("http://www.wesellcoffee.com/media/large%20platter%2011.jpg"); 
    background-size:100%; 
    background-repeat: no-repeat; 
    width:600px; 
    height:537px; 
} 
#boxE { 
    background-color: #60330F; 
    width:75px; 
    height:75px; 
}