[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と囲うのもめんどうって時。
たまに使うので覚えておくとよいかと思います。

この記事を書いた人

Yuhei Katayama

【フロントエンドエンジニア】

2014年よりフリーランスとして活動開始、3年目。タイが好きでよく行く。人手不足を補うをもっとうに仕事しています。HTML、Wordpress、EC-CUBE、MakeShop、カラーミーショップ、楽天のカスタマイズ経験あり。

この記事が気に入ったら
いいね!しよう

最新の情報をお届けします

赤ヒツジ先生~コーディングチェック~

このサービスは、コーディングのHTMLチェックではなく、デザイン通りにコーディングできているかをチェックするサービスです。