背景画像の挿入(CSS)

自分のブログページなどに背景画像を挿入してみましょう

ここではCSS(スタイルシート)による背景画像の挿入方法を説明します。

1.スタイルシートとは

簡単に言うと表示に関する定義を行う記述コード(タグ)になります。
この記述は本文のHTML内と外のどちらでも設置可能ですが、ここでは本文内に記述します。

2.コードの記述

簡単な方法は背景画像のタグを公開(配布)しているところから、コピー&ペーストする方法です。
コピーしたタグを本文内の先頭にペーストしてください。

<style type=text/css>
body{background-image:url("http://i31.photobucket.com/albums/c364/carrielynne1/1mycutespace/backgrounds/orange/oy4.gif");
background-attachment:fixed;;
background-repeat:repeat;;
background-position:center;;
background-color:black;} </style>
<div style="position:absolute; left:0px; top:0px; overflow:auto;">
<a href="http://mycutespace.com" target="_new">
</a>
</div>

<p>css test</p> 

上の例では、<p>css test</p>以外(それより上)はスタイルシートの記述になります。

3.使用例として

info's_blogをみてください。表示中のひとつの記事中にスタイルシートが埋め込まれています。
ここでは背景画像として説明しましたが、画像でなく色で指定もできます。
またスタイルシートは背景以外のいろいろな表示効果を設定することができますので、文字の色や大きさなど背景に合わない場合など
変更を加えることが可能です。

簡単なCSSの記述からチャレンジしてみてください。
ブログ以外のページでも利用可能です。応用次第ではかなり可能性が広がるはずです。