左右の画像と文字を上下にちょっとずらしたレイアウト２

 
ブロックを２分割して右カラムをちょっと左にずらした定番のレイアウト。
カラム１，カラム２に対してCSSで設定しているため、左右のサイズ割合（画像をもっと大きく・小さく）や、重なる部分の寸法の増減、右カラム背景の色やパターン（画像データ）を簡単に変更できます。
stepの表示はリードに指定しCSSでリードに対して設定しています。
 
また、contents_007はスマホでは上下で並びます（１カラム）が、スマホでも若干重なるようにしています。重なる時に上になるカラムの幅を若干狭くして重なりを表現しています。
 
右が上になるよう重ねるパターン。「Human Stage」の『お仕事紹介までの流れ』ページのブロックをBiNDで表現してみました。
参考）
https://www.human.or.jp/flow/
 
 

contents_007a

右が下になるように重ねるパターンにCSSでアレンジしたパターン。右カラムの背景色はCSSで簡単に変更できますので、サイトのイメージカラーなどに合わせることも簡単です。
007aには詳細ページへのリンクを配置しています。
 

contents_007b

右カラムの背景を繰り返し配置ができる素材で指定したパターン。CSSのbackground-imageで画像を指定してあげるだけで簡単に変更できるようにしてあります。
以下のようなサイトで繰り返し配置で使える背景素材がダウンロードできます。
https://www.toptal.com/designers/subtlepatterns/thumbnail-view/
http://bgrepeat.com/
 
 

画像
上のブロックでは幅640pxの画像を配置しています。ブロックの幅は1020pxで余白30pxに設定してあるので500px程度あればサイズ的には足りますが、若干大きめの画像を配置して縮小表示されるようにしています。