前回は「画像をコンテンツ幅を越えて画面の横幅いっぱいに広げる方法」を書きましたが、背景画像の場合は同じ方法では上手くいかないようでしたので、別の方法を試してみたいと思います。
画像をウィンドウ幅いっぱいに広げる
前回の復習ですが、前回はこのような感じで、画面幅（ページ幅）いっぱいに画像を広げることに成功しました。
.full-wide-screen{
margin:0 calc(50% - 50vw);
}
前回はこのような感じで広がりました！詳細は前回の記事をご参考ください😃
背景画像を広げる場合
[rml_read_more]
コンテンツ上に配置している「画像」とはちょっと状態が違うので、設定に工夫が必要なようです。
.background-image-wide-full {
margin:0 calc(50% - 50vw);
width:100vw;
}ブロックの横幅を「100vw」として画面幅いっぱいに広げました。
背景画像が画面幅いっぱいに広がりました！！
まとめ
「画像」をウィンドウ幅に広げる場合と「背景画像」をウィンドウ幅に広げる場合は、画像の状態が違うので、ページ幅いっぱいに広げたい…となった場合は、ちょっと工夫が必要なようです。
うーん、奥が深い・・・😃
次回は、さらに複雑なパターンにも挑戦してみたいと思います。ご参考ください😃
