Stinger3 カスタマイズ – 背景画像の設定-その2-
2016/11/10
以前の投稿の背景画像の設定では、WordPressの管理画面から背景画像を設定する方法を投稿しました。
自分もそうしていたのですが、スマホで見たときにどうも背景画像がカクカク動いてしまってどうにもこうにも気に入らなかったので、思い切ってスマホの背景画像をなくしてしまおう!と思い立って修正してみたのでメモ。
まずは、背景画像の設定を元に背景画像を削除。
次にPC版のcssであるstyle.cssを修正。
bodyの箇所を下記に修正しました。
body { background-image: url('画像が保存されているurl'); background-color: #f3f3f3; background-repeat: no-repeat; background-attachment: fixed; }
こんな感じ。
ちなみに、背景画像に関するcssは下記になります。
●背景画像を表示
body { background-image: url('画像が保存されているurl'); }
●背景画像を横方向に繰り返す
body { background-image: url('画像が保存されているurl'); /*下記を追記*/ background-repeat: repeat-x; }
●背景画像を縦方向に繰り返す
body { background-image: url('画像が保存されているurl'); /*下記を追記*/ background-repeat: repeat-y; }
●背景画像を1回だけ表示(繰り返さない)
body { background-image: url('画像が保存されているurl'); /*下記を追記*/ background-repeat: no-repeat; }
●背景画像を固定する
body { background-image: url('画像が保存されているurl'); background-repeat: no-repeat; /*下記を追記*/ background-attachment: fixed; }
なるほど~CSSもお勉強。