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