[CSSテク]親要素より大きいサイズ要素を背景に表示させる方法

ホームページ制作

テキストにすると何言ってるのか、いまいちわからないので、図にしてみました。

こういう事たまにないですか?

WordPressの案件だとたまにあるかなーって思います。
普通なら、2つブロック要素を用意して背景ぶろっぐは画面いっぱいに、もうコンテンツブロックははサイズ指定して真ん中に寄せる。

それなら簡単なんですが、コンテンツブロックサイズ以上に幅を広げることが出来ない場合があります。

例えばMakeShopとか楽天ってそういうこと出来ませんよね。

そんな時でも、図のようなことをする方法があります。

.wrapper{
 overflow:hidden;
}
.background_block{
 width: 1000px;
 margin: auto;
} 
.inner_block {
 background-image:url("header_img2.jpg");
 background-size: cover;
 background-color: #000;
 margin: 0 -100vw;
 padding:10px 100vw 30px;
}

<div class="wrapper"><!-- overflowで隠す用 -->
<div class="background_block"><!-- こいつが邪魔 -->

<div class="inner_block">
<!-- 背景用 -->
<div class="content">ここにコンテンツ</div>


</div>

</div>
</div>


マージンで横幅広げて広げた分をパディングで戻す。
このままだとオーバーしてしまうので、一番親のブロック要素でhiddenしてしまう。という流れです。

よくあるのがWordpressの固定ページで横幅を1000pxで固定してしまってて、幅だけフルサイズにしたいけど、毎回1000pxと囲うのもめんどうって時。
たまに使うので覚えておくとよいかと思います。

気に入った記事であれば、ぽちっとお願いします<(_ _)>