グラデーション背景に切り抜き画像を配置

 
ブロック背景にはlinear-gradientでグラデーションを指定しています。横長にトリミングして使える画像がなく、切り抜いた画像を使ってビルボードを作る方法の一つとして見かける方法だと思います。
 
ブロック自体の背景に指定しただけでは単調になってしまうので、スマホの時は背景グラデーションからはみ出した感じで画像が配置されるようにしています。
 

billboard_010a

パソコン用レイアウトで背景を画像の途中できれるように設定しています。ブロック自体の高さの指定を使い調整しています。
 

billboard_010b

縦に長い画像の下をカットしたような時に、ブロックの下端にラインを入れて隙間なく配置するレイアウト。