CSS背景画像がセレクタの高さ/幅と一致しませんか？

Question

私は330pxの500pxの幅と高さを持つクラスの背景画像としてレンダリングしたいのですが非ローカルの画像の負荷を持っています。これらは、クラスのためのCSSプロパティで指定されていますが、background: url('http://www.example.com/image.jpg');は、このサイズに合わせて拡大縮小し、代わりにそれは元のリモートの高さだ保持しません。

はおそらく、私は、ローカル/リモートのは、この問題とは何かを持っており、デフォルトで背景画像は、それはの財産だとセレクタの幅や高さに取らないということを考えて、完全に間違っていますか？

<img>タグの高さ/幅の属性を変更すると、リモートファイルにも影響するように、背景のプロパティの高さと幅をセレクタと同じにレンダリングすることが可能なら？ ;）

#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> 

これが可能であり、それを行うには、比較的効率的な方法をいただければ幸い場合についてどのような答え：

ここでは、関連するCSS + HTMLマークアップです。

私はむしろ、そのクラスを使用して再サイズて、その後、それから、それをクライアント側を行う画像再サイザーのクラスを見つけ、ローカルの画像をダウンロードすることができると思います。

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