<< スタイルシート(CSS) background-color | Home | スタイルシート(CSS) background-repeat >>

スタイルシート(CSS) background-image

前回のbackground-colorでは、背景色の指定をやりました。
今度は背景に画像を表示してみましょう。

background-image: url(画像の保存先URL);

括弧内の「画像の保存先URL」は画像を保存した場所によって変ります。
ただスタイルシートを外部(別ホルダー)に保存した場合はそのスタイルシートの位置が基準になるので注意が必要です。
※解らない方はHTML 画像の配置 img要素などを参考にして下さい。

それでは300×300のボックスに下のような100×100の画像を背景画像として表示してみましょう。
カモフラージュ


背景に「background-image:url(http://img-cdn.jg.jugem.jp/272/1474973/20091013_1058327.gif);」と指定すると全体に表示されます


背景に「background-image:url(images/camo01.gif);」と指定すると上のように全体に指定画像が表示されます。

background-imageの指定は、前回の「background-color」で示したようなHTMLのタグに使用することが出来ます。
ただし画像の色と文字の色に注意しないと、文字が読みづらくなるので注意が必要です。

Calendar

    123
45678910
11121314151617
18192021222324
252627282930 
<< June 2017 >>

Recent Entries


Categories


Archives


Profile


Valid XHTML 1.0 Transitional

Valid CSS!

Comments

Leave Comment










Trackbacks

Trackback URL

Recent Comments

Recent Trackbacks