ワードプレスでコンテンツの途中に全幅のコンテンツを入れたい

最近ライディングページ案件などでよくぶち当たる問題です。

今までは途中でコンテンツを区切って、途中に100％幅のコンテンツを入れたりしてたのですが、もっと簡単な方法があったのでメモ。

HTML側

<div class="orverwid owbk1">
<p><img src="後ろが透けてるPNG画像なんて置くとなんかパララックス気分になれるお/_0001.png" /></p>
<p>ここが全幅コンテンツになるよぉ～</p>
</div>

PNG画像は任意でどうぞ。

CSS側

#page{ overflow-x: hidden; } 

.orverwid{ 
margin:0 -200%; 
padding:0 200%; 
background-attachment: fixed; 
background-size: cover; 
background-position: center; 
text-align: center; 
} 

.owbk1 {background-image: url(/背景.jpg);}

IDのpageに「overflow-x: hidden;」を入れたのはWINで見た時に横幅がスクロールしてしまうのを防ぐものです。
WPのテーマなら体外あるIDかと思いますが、無ければ自分でHTML側に設置してください。

今回は背景を画像にする想定でのCSSですが、無地ならそこはお好みで。
「.owbk1」これを「.owbk2」など増やしていけば、1ページ内に色々全幅コンテンツが増やせると思います。