問題点:PSDのデザインは最大の画面サイズではありません。 したがって、PSDからバックグラウンド全体をカットすると、バックグラウンドは繰り返されますが、破損します。
ベストプラクティス:元の画像パターンのみをカットします(利点:小さな画像サイズの結果、ページの読み込み時間が短くなります)
①背景画像カッティングプロセス
STEP 1. PhotoshopでオリジナルのPSDを開く (例:元の背景画像のサイズ→ 1000 x 700 px)
背景画像のパターンコピーする手順
STEP 1. クリックPattern Overlay(2) > クリックPattern Overlay > (3) クリックcopy pattern (4)
STEP 2. コピーしたパターンにマウスを合わせて元のパターンサイズ(283 × 283 px)を確認し、サイズを覚えておいてください。
STEP 3. 背景レイヤーを新しいページに複製します。
STEP 4. 背景の矩形形状(1000 x 700 px → 283 x 283 px)のサイズを変更し、Radius(半径)を15px → 0)を削除します。 背景(bg-charm.png)イメージをトリムして保存します。
 元と背景画像:(1000 x 700px)  repeat外した背景画像:(283 x 283px)②PC / SP用のビューポート互換コーディング(CSS):
PCの場合:
CSS
.charm-bg {
background: url('img/charm/bg-charm.png') repeat top left;
}
SPの場合:
CSS
.charm-bg {
background: url('img/charm/bg-charm.png') repeat top left;
background-size: 50%;
}