応答性の高い2色の背景を作るには？

Question

だから、これは私が達成しようとしているものです：

デスクトップ画像：

モバイル画像：

「私はすでにボックスを持っているが、私はドン2色の背景を追加する方法を知っています。私はブートストラップを使用しています。

これは、あなたがlinear-gradient経由でこれを達成することができ、これまで

body { 
 
    background-color: #F9F9F9; 
 
} 
 

 
#container { 
 
    margin: auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-12"> 
 
     BOX 1 
 
    </div> 
 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-sm-4 col-md-6" style="margin-bottom:20px"> 
 
     BOX 2 
 
    </div> 
 
    </div> 
 

 
    <div clas="row"> 
 
    <div class="col-sm-4 col-md-6" style="margin-bottom:20px"> 
 
     BOX 3 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

私のコードです：

body { 
 
    background: linear-gradient(to bottom, #007cc1 100px, #fff 100px); 
 
    margin: 0; 
 
    min-height: 100vh; 
 
}