通常、WordPress管理画面から設定出来ますね。
これをCSSに直接記述してしまう事もできます。
背景用画像をアップロードしてCSSに記入する
ではやってみます。
まずは画像をアップロードしましょう。
大きな風景写真でもいいし、
小さなイラストでもいいし。
とにかくアップロードして下さい。
メディア→
該当画像を編集→
ファイルのURL
が表示されていますね。
これをテキストエディタ等にコピペしておきます。
次に、外観→
テーマの編集→
style.css→
body｛
｝
を探します。
以下のコードを追加。
サイト全体を指定するCSSのところに記入。
（このままコピーしないで下さい。UTF-8Nに変換して下さい。）
body {
min-width: 320px;
overflow: hidden; /*はみ出た部分をどうするか*/
word-wrap: break-word;
background-color:#fff;
background: url("http://www.yourdomain.com/wp-content/uploads/～名前～.png");
background-repeat: repeat;
background-attachment: fixed;
background-position: left;
}
以上です。
background-repeat: repeat;
は、小さな画像を使っている場合、分かりやすいですね。
繰り返して画像を表示するという意味。
繰り返さず一回だけ表示させる場合は
background-repeat:no-repeat;
でOKですね。
URLのところに、
さっきテキストエディタにコピーしておいた
画像URLを記入します。
参考にしたサイト
WordPress[Stinger5] プラグインなしで背景を画像にする
http://dmgadget.info/wordpress-stinger5-background-image/
[CSS]背景画像をブラウザいっぱいに表示するシンプルな最新テクニック
http://coliss.com/articles/build-websites/operation/css/css-responsive-full-background-image-by-sixrevisions.html
モバイル・スマホで背景画像がチカチカして見にくい時
Androidで起こる現象です。
一部の、おそらく古いAndroid端末で起こるようです。
標準ブラウザでサイトを表示した時、
背景画像がチカチカと点滅するような感じで、
非常に見にくくなってしまいました。
それを解決する方法が…
Android標準ブラウザで表示がヘンなら原因は「background-attachment」かも
http://www.seomode.jp/html-css/2014/01/17/2013/
上記サイトのように、
問題はbackground-attachmentのようです。
スクロールしても背景画像が固定されるようになっていたのですが、
それがAndroidの仕様と相性が悪いです。
なので、モバイルでは背景画像もスクロールするように設定。
これで問題なく表示できました。
モバイル・スマートフォン用のCSSの記述欄に、
以下のコードを追加。
body {
background: url("http://www.yourdomain.com/wp-content/uploads/～名前～.png");
background-repeat: repeat;
background-attachment: scroll;
background-position: left;
}
以上です。
実際に色んな端末で表示をチェックしてみると良いですね。
タブレットも。
こちらのブログはBloggerです。
WordPressの実際の表示を確認したい方は
ラビットしま子の「人生美容パラダイス」をご覧下さい。
当ブログの情報は全ての方に応用できるとは限りません。
ご利用は自己責任です。当ブログ側はいかなる責任も負いません。
必ずデータは最新のバックアップを取っておいて下さい。
WordPressを利用される場合はUTF-8Nの文字コードに必ず変換して下さい。
当ブログのコードをコピーしてphpファイル等に直で貼付けすると
ファイルやデータが破損します。
パソコンのメモ帳は不可です。
詳細はWordPressヘルプを参照下さい。
ラビットしま子はサイト制作のプロではありません。
個別のカスタマイズについての相談は乗ってあげたいけど、乗れません。
（わからんから）
スポンサードリンク