アイコンを壁紙にしてみましょう!(縦長・横長背景)

◆ソース(右側)は、すべて<HEAD>〜</HEAD>の間にコピーして入れてくださいね。

                         background-color : #・・・・・・; (カラーコードで選択した6桁の英数字)→カラーコード
                          background-image:url(・・・.gif); (アイコンを指定)
 
 上の赤と緑の部分を変更すれば、OKですよ。場所の目安は、<TITLE>タイトル</TITLE>の後に入れてください
 改行をひとつ入れてからコピペすると分かりやすいです。()や、;を消さないように注意してくださいね。
◆お気に入りのアイコンを用意します。 
ここでは、アイコンの名前をrisu.gifとします。

htmlファイルとこのgif画像を同じフォルダーに入れる場合の説明です。
   risu.gif
◆左の横に一列並ぶ壁紙です。

こんな感じになりますよ♪アイコンは、透過してありますので、

background-color : #d2e9ff; (バックの色・・ブルー)
background-image:url(risu.gif); (アイコンを指定)

 ソース⇒











<STYLE type="text/css">
<!--
BODY{
background-color : #dse9ff;
background-image:url(risu.gif);
background-repeat : repeat-y;
background-attachment : fixed;
background-position : left top;
}
-->
</STYLE>

◆右の横に一列に並ぶ壁紙です。

こんな感じになりますよ♪  アイコンは、透過してありますので、

background-color : #ffffff; (バックの色・・白に指定)
background-image:url(risu.gif); (アイコンを指定)

 ソース⇒












<STYLE type="text/css">
<!--
BODY{
background-color : #ffffff;
background-image:url(risu.gif);
background-repeat : repeat-y;
background-attachment : fixed;
background-position : right top;
}
-->
</STYLE>

◆上部に一列に並ぶ壁紙です。

こんな感じになりますよ♪ アイコンは、透過してありますので、

background-color : #ffe8f3; (バックの色・・ピンクに指定)
background-image:url(risu.gif); (アイコンを指定)

  ソース⇒












<STYLE type="text/css">
<!--
BODY{
background-color : #ffe8f3;
background-image:url(risu.gif);
background-repeat : repeat-x;
background-attachment : fixed;
}
-->
</STYLE>

★上記のソースは、すべて壁紙が固定になっています。
(ページが長くなっても、壁紙はスクロールせずに、固定されます)
固定にしない場合は・・・ソースの中の background-attachment : fixed; の部分を削除してください。


スポンサードリンク



Copyright (C) 2000-2004   Shangri_La  All rights reserved
http://kimi.cside.com/