【応用編】背景に画像を貼り付ける

＝ お知らせ ＝
この内容は下記に移転しました。（2008.08.13）
オリジナルデザイン講座 for So-net blog

【基礎編】【準備編】【実践編】から続いています。

【お題】両端の背景に画像を貼り付ける

【完成形】

【準備】
背景画像を用意します。
背景画像にサイズの制限などはありませんが、繰り返し表示させるのでシンプルなほうがいいかもしれません。

今回用意した背景画像は、こちら。自作です。

【変更】
背景画像をブログ内に追加保存し、bodyを変更します。

body {
background:#F5DEB3 url(BBB.jpg);
}

注）「BBB.jpg」はファイル名です。
　　画像を保存したときのファイル名をここに当てはめてください。

これで完成です。

【注意事項】
背景画像を貼り付ける場合、背景色（サンプルでは「#F5DEB3」の部分）の指定はなくても構いませんが、何らかの理由で背景画像が表示されないとき、スキン全体がイメージしている色と全く違う色が見えることになりますので、忘れずにつけておきましょう。

また、もしbackgroundのスタイルに「no-repeat」が付いていたら、それは消してください。これは「繰り返さない」という命令です。
背景画像で繰り返したい場合は、何も指定しません。

background:#F5DEB3 url(BBB.jpg) no-repeat;

以上。

【番外編】背景画像についてへ続きます。

【目次】へ

コメント 8

次の記事にまとめてコメントしちゃいましたが、
やっぱりここにもniceマーク入れるべき！と思ってniceを入れたのですが、そしたらコメント無しだとオカシイと思って（＾＾；；
なので、重複しますがここにも足跡残します～。
かほりんさん、お疲れ様でした。
応用編、番外編、とてもよくわかりますー！分かりやすすぎですね。
最後の最後まで完璧に仕上げたかほりんさん、立派です！
これで、ソネブロのブログ教室さんは完敗ですね。ハッハッハ、、
by yukarin (2007-03-01 19:05) 

かほりんさん。こんばんは。
やっぱり、かほりんさんスゴイですぅ。
一回読んだだけじゃ理解できない頭なので、後で
何回も読んで理解したいと思います。
ありがとう☆
by robinぱぱ (2007-03-01 20:03) 

＊ yukarinさん ＊

ナイス＆コメントありがとうございます！
ナイスとコメントはいくつあっても嬉しいです♪
今回もわかりやすいですか？
じゃぁブログ教室に勝てたかな。（笑）

応用編、まだまだ続く・・・かも？？？です。
by かほりん (2007-03-01 20:52) 

＊ robinぱぱさん ＊

コメントありがとうございます♪
小難しく書いてますが、直す行は１行だけなのでお時間があるときにでも是非試してみてくださいね♪
by かほりん (2007-03-01 20:58) 

お～！応用編だぁ～
でもやっぱり何度も読まないと出来そうもない私。
今回もとってもわかりやすく説明されてますね！
by モコ (2007-03-02 07:46) 

応用編がいよいよ始まりましたね？
（と、なんかもっと続いてほし～よーなコメントしてしまいましたよ。笑）
まだ、いろいろ野暮用が多くて試していないのですが
あとでゆっくり読ませてもらいますぅ。
“ライバルは「ブログ教室」”うけちゃいました。
by バウムクーヘン＠ (2007-03-02 09:00) 

＊ モコさん ＊

ナイス＆コメントありがとうございます！
そう、応用編ですよ〜。
難しそうに書いてますけど、やることは1行なのでお時間があるときにでも試してみてくださいな♪
by かほりん (2007-03-02 10:50) 

＊ バウムクーヘン＠さん ＊

ナイス＆コメントありがとうございます！
応用編が始まりましたよ。え？始まった？！
ふふ。どんなペースになるかはわかりませんが、もうちょっと続けようかなと思ってるところです。
みんなで個性的なブログを作りたいのでね。(^^)b

ブログ教室で先週からスキン編集のレッスンが始まったんですよね〜。
So-netでやらないみたいだったから私が始めたのに〜。
でも、やっぱり要望が多かったってことでしょうかね？
by かほりん (2007-03-02 11:08)