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 и ниже).Вы могли бы использовать modernizr для тех.Или вы можете сделать это по-старому, с изображением внутри div

<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; }