問題点：PSDのデザインは最大の画面サイズではありません。したがって、PSDからバックグラウンド全体をカットすると、バックグラウンドは繰り返されますが、破損します。

ベストプラクティス：元の画像パターンのみをカットします（利点：小さな画像サイズの結果、ページの読み込み時間が短くなります）

①背景画像カッティングプロセス

STEP 1. PhotoshopでオリジナルのPSDを開く (例：元の背景画像のサイズ→ 1000 x 700 px)

![image-1-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/8e37df39-3913-d5e2-29f7-a81d2143e938.png)

背景画像のパターンコピーする手順

STEP 1. クリックPattern Overlay(2) > クリックPattern Overlay > (3) クリックcopy pattern (4)

![image-2-2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/780b6c6b-ed77-b818-4cb1-431f763a86fb.png)

STEP 2. コピーしたパターンにマウスを合わせて元のパターンサイズ（283 × 283 px）を確認し、サイズを覚えておいてください。

![image-3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/c5ba0cab-eb5e-4b24-8012-ac87c56682be.png)

STEP 3. 背景レイヤーを新しいページに複製します。

![image-4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/a3803329-d6ec-c0e8-dd30-745c31198a01.png)

STEP 4. 背景の矩形形状（1000 x 700 px → 283 x 283 px）のサイズを変更し、Radius（半径）を15px → 0）を削除します。背景（bg-charm.png）イメージをトリムして保存します。

![image-5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/76d6e1ef-fd85-8c03-2858-510b1e2f2f4b.png) 元と背景画像：(1000 x 700px) ![image-7.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/488641/1b9b0f04-65eb-36e4-bba4-39dc972cf4eb.png) 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%;
}