私はレスポンシブ Web サイトを設計しています。コンテンツは 320 ピクセルから最大 960 ピクセルの幅で、水平方向に中央揃えの div です。ここで、画面幅と同じ長さの画像であるヘッダー ストリップをコンテンツ ボックスで影響を受けないようにしたいのですが、この 960px ストリップの外側にある残りの部分を黒く塗りつぶしたいと考えています。この画像はそれをよりよく説明します：
最初は線形グラデーションをしようとしましたが、ブレークポイントの正確な位置がわかりません。黒の半透明の div を試してみましたが、うまくできませんでした。
純粋な css3 でこれを行う方法はありますか、それとも js/jquery を使用する必要がありますか? 前もって感謝します。