TOP ＞ スタイルシートで背景をデザイン ＞ 背景の画像をcssで指定する
背景の画像をcssで指定する
Webサイトはテキストと背景色だけでも作成することが出来ますが、やはり背景に画像を入れるとぐんと見栄えが良くなります。 css/スタイルシートでも、もちろん、背景に画像を指定することが出来ます。
要素の背景に画像を指定するには「background-image」 プロパティを使います。値に画像が置かれているURLを指定します。 外部にスタイルシートファイルを置く場合、絶対URLを指定するのが普通ですが、相対URLを指定することも出来ます。この場合は、 cssファイルのあるディレクトリを基準にします。
「background-image」 プロパティは「background-color」 プロパティと同時に使用することが出来ます。background-colorプロパティで指定した背景色の上に、 「background-image」プロパティで指定した画像が表示されます。
背景の画像をcssで指定する
【書き方】
background-image : url(表示したい画像のURL) ;
"背景の画像をcssで指定する"のサンプルはコチラをクリック
- サンプルページのコードは以下の通りです。
|
【スタイルシート】 body{background-image: url(302-1.gif);} .c1{background-image: url(http://www.1css.net/sample/302-2.gif); color: #ffffff;} 【HTML本文】 <html> <head> <title>背景の画像をcssで指定するのサンプル</title> <meta http-equiv="content-type" content="text/html"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="http://www.1css.net/sample/302.css" type="text/css"> </head> <body> <p>背景の画像をcssで指定しています。ページ全体には木目調の背景が指定してあります。</p> <p><p>要素で設定しているこの段落の途中で<span class="c1">このように背景色を指定することも出来ます</span></p> <p class="c1">もちろん、<p>要素そのものに背景色を当てることも出来ます。</p> </body> </html> |
[
スタイルシートで背景をデザイン ]
