あなたのブログをきれいにする方法教えます～ブログデザイナーヒナによるブログデザインＱ＆Ａ～

こんにちは、本日は「日記の背景画像を左上固定で１ヶだけ入れたい」というご質問に対してお答えします。

＜ご質問＞miki285さん

はじめまして、ご質問いただきありがとうございます。



のように書くと、壁紙としてではなく単なる画像表示になります。

miki285さんは、当サイトで以前掲載した「壁紙の設定の仕方」を見てくださったようでありがとうございました。

復習すると、このような記述になります。

---

【画像の繰り返しを指定】

背景画像は、
background-repeat:

で、並び方を指定できます。
何も指定しないと、背景画像は繰り返し表示されます。

background-repeat:repeat-x; 横方向にのみ繰り返し。
background-repeat:repeat-y; 縦方向にのみ繰り返し。
background-repeat:no-repeat; 繰り返さない。

ご質問では、左上固定で一個だけ表示したいということなので、

background-repeat:no-repeat; を指定します。

---

【背景画像の表示位置を指定する】

背景画像の表示位置は

background-position:

で指定します。

指定しない場合は、左上になりますので、ご質問の場合には、この指定は書かなくて大丈夫ですが、応用編として書き方を載せておきます。

1＞右寄せ、下寄せの指定　センタリングの指定

background-position: right bottom;　右下
background-position: right top;　右上
background-position: left bottom;　左下

background-position: center center;　縦横真ん中
background-position: center top;　横真ん中上
background-position: center bottom;横真ん中下
background-position: left center;左縦真ん中
background-position: right center;右縦真ん中

横、縦を%で表すことができます
background-position: 0% 0%;　左上

background-position: 100% 100%;　右下

---

注意点

背景画像が文字と重なって、文字が読みにくくならないか注意しましょう。

たとえば、右下に背景を配置して、自分のブラウザでは仮に最大表示で見ていて、背景画像と文字が重なっておらず、見やすかったのに、ユーザーのブラウザでは、解像度が低いなどで、もっと小さい画面でみているような場合には、背景画像が重なって表示されてしまう、という場合もあります。


【 ★今日の日記はいかがでしたか？　お役に立てましたら、一日一票お願いします♪ 】

---

日記のFAQ更新情報をメルマガ配信始めましたメルマガサンプルとバックナンバー＆配信登録はここをクリックしてください。週２～３回発行です。

---

【質問募集しまス】

・楽天広場のhtmlで困ったこと、質問があれば、2005年3月はこちらの記事にコメントしてください。自分の日記に質問を書いてトラックバックしていただいてもけっこうです。


【 ★人気ブログランキング参加中。ただいまの順位は？ 】