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

 
ブロック背景には左半分だけ模様のある（右半分は白・透明）画像を中央揃えの上下繰り返しで指定。
そこにブロックは右が大きいブロックとすることで、中央で別れた背景とずれができてデザインっぽくなります。
 

contents_001a

パソコンで右にある画像が、スマホでは上になるようにCSSで調整しました。
 

contents_001b

ブロック内コンテンツの横幅に数値を指定したバリエーション。横幅が少し小さくなるため画像も少し横寸法を小さくしてバランスをとりました。
 

画像
1000px × 400px の画像をシェイプに読み込むことなく、直接画像で配置しています。
contents_001bでは、800px × 400pxにしています。