CSS 배경 이미지가 선택 도구의 높이/너비와 일치하지 않습니까?

Question

너비가 500px이고 높이가 330px 인 클래스에 대해 배경 이미지로 렌더링하려는 비 로컬 이미지가 있습니다. 클래스의 CSS 속성에 지정되어 있지만 background: url('http://www.example.com/image.jpg');은이 크기에 맞게 확장되지 않고 원래의 원격 높이를 유지합니다.

아마 내가 원격/로컬이이 문제와 관련이 있고 배경 이미지가 기본적으로 선택기의 너비 또는 높이를 차지하지 않는다고 생각하는 것이 잘못 되었나요?

<img> 태그의 높이/너비 속성을 변경하면 원격 파일에도 영향을주는 것과 같이 배경 속성의 높이와 너비를 셀렉터와 동일하게 렌더링하도록 확장 할 수 있습니다. ?

여기에 관련 CSS + HTML 마크 업의이 가능한 경우에 같은

#sub_section_1 { 
    width: 100%; height: 350px; 
    margin-bottom: 20px; 
} 

#sub_section_1 .text { 
    float: left; 
    width: 240px; height: 100%; 
} 

#sub_section_1 .image { 
    float: left; 
    background: url(../images/sub_image.png) no-repeat; 
    width: 500px; height: 330px; 
    padding: 10px; margin-right: 10px; 
} 

.overlay { 
    padding: 20px 20px; 
    background: url(../images/desc_overlay.png) repeat-x; 
    height: 60px; width: 460px; 
} 


<div id="sub_section_1"> 
<div class="image"> 
<div class="acc_image_2"><div class="overlay"><h2>Rabatt <?php echo $deal2['savings']; ?>% /Dein Preis - <?php echo $deal2['price']; ?>CHF</h2></div></div> 
</div> 
<div class="text"> 
<h2><?php echo $deal2['title']; ?></h2> 
<p><?php echo $deal2['description']; ?></p> 
<div class="button" align="center"><a href="<?php echo $deal2['link']; ?>">Purchase Deal</a></div> 
</div> 

어떤 대답하고는 크게 감상 할 수 할 수있는 비교적 효율적인 방법).

나는 클라이언트 측에서 이미지 재분할 클래스를 찾고 이미지를 로컬로 다운로드 한 다음 해당 클래스를 사용하여 크기를 조정할 수 있습니다.

Answer 1

예상되는 호환성에 따라 다릅니다. CSS3는 배경 크기를 제공하지만 이전 브라우저 (IE8 이하)에서는 지원되지 않습니다. 모더니져를 사용할 수 있습니다. 또는 당신은 사업부

<div id="container"> 
    <div id="background"><img src="...."></div> 
    <div id="content"> 
     Content here 
    </div> 
</div> 

그리고 CSS

#container { position : relative; } 
#background { position : absolute; 
       width : 100%; 
       height : 100%; 
       z-index : 12; 
       top : 0; 
       left : 0; } 
#background img { width : 100%; 
        height : 100%; } 
#content { position : absolute; 
       z-index : 13; 
       top : 0; 
       left : 0; }