divの背景を反応的にするには？

Question

私は体の中央に水平に配置された容器を持っているが、このコンテナは、それの内側のdivを含み、このdivが縮小または、このようなウィンドウのサイズを変更する際、私はdiv要素の背景が応答するようにしたい背景、 を持っていますここにask.fmのサイトは、私はbackground-size: cover;を使用しましたが、それは私と一緒には動作しませんでした。

HTML

<div class="container"> 
    <div class="cover"></div> 
</div> 

CSS

.container { 
    width: 851px; 
    margin: 0px auto; 
} 

.cover { 
    background-image: url("wall.jpg"); 
    background-size: cover; 
    background-repeat: no-repeat; 
    width: 100%; 
    height: 300px; 
} 

/* Media Queries */ 
@media screen and (max-width: 840px) { 
    .cover { 
    width: 100%; 
    } 
    .container { 
    width: 100%; 
    } 
} 

@media screen and (max-width: 600px) { 
    .container { 
    padding: 0; 
    } 
} 

Answer 1

私は通常、これらの2つのものの組み合わせを行う - 画面サイズに応じた - と私は、画像/背景またはインライン依存のために異なるSRCをつかみます.. 。

<section class="container"> 
<div class="inner-w"> 

    <figure> 
    <img src="https://placehold.it/1600x900" alt=""> 
    </figure> 

</div> 
</section> 



<section class="container section-name"> 
<div class="inner-w"> 

    <!-- ... --> 

</div> 
</section> 

https://jsfiddle.net/sheriffderek/4j2avj7v/

figure { 
    margin: 0; 
} 

figure img { 
    display: block; 
    width: 100%; 
    height: auto; 
} 

.container { 
    background: gray; 
    border: 1px solid blue; 
} 

.container .inner-w { 
    max-width: 400px; /* just for this example... likely 900+ */ 
    margin: 0 auto; 
    background: red; 
} 

.section-name .inner-w { 
    min-height: 300px; /* it needs to have some shape */ 

    background-image: url('http://placehold.it/1600x900'); 
    background-size: cover; 
    background-position: center center; 
}