下のデモのような、斜めに背景画像を表示させる方法です。
※デモはPCのみ対応
こんな感じのサイト、よく見かけますね。
HTML
<div class="container"> <div class="content1"> ~省略~ </div> <div class="bg-image"></div> <div class="content2"> ~省略~ </div> </div>
CSS
.content1, .content2 { position: relative; z-index: 2; } .bg-image { position: relative; width: 100%; height: 0; padding-bottom: 80%; background-image: url(./image.jpg); background-position: center; background-size: cover; background-attachment: fixed; background-repeat: no-repeat; z-index: 1; } .bg-image::before, .bg-image::after { content: ''; position: absolute; left: 0; width: 100%; height: 0; padding-bottom: 40%; background-color: #fff; -webkit-transform: skewY(8deg); transform: skewY(8deg); z-index: 1; } .bg-image::before { top: -40%; box-shadow: 2px 2px 2px rgba(0,0,0,.4); } .bg-image::after { bottom: -40%; }
念のためにプレフィックスを入れてます。
細かい数値は調整して使って下さい。
このように、transform: skew で要素を斜めに変形させることができます。
transform: skew(X軸の傾き, Y軸の傾き); //傾きの単位はdeg transform: skewX(傾き); transform: skewY(傾き);
使いどころは限られているかもしれませんが、覚えておいて損はないでしょう。
アクセントに使って下さい。
ちなみにbackground-attachment:fixed;はスマホには対応してないので、別途対応して下さい。今回は割愛します。