スタイルシートを使う
▼ページの背景に画像を1枚だけ表示する
背景画像をレイアウトしてみましょう。背景画像には下の画像を使用します。

<head>から</head>の間に以下のタグを挿入します。
<style type=text/css>
<!--
body
{
background-image:url(ここに画像のファイル名を記入);
background-repeat:no-repeat; ← 画像を1枚だけ表示するという意味
background-attachment:fixed; ← 画像を固定するという意味
}
-->
</style> |
<html>
<head>
<title>
私のホームページ
</title>
<style type=text/css>
<!--
body
{
background-image:url(img/ic.jpg);
background-repeat:no-repeat;
background-attachment:fixed;
}
-->
</style>
</head>
<body text="#999999" link="#0000FF" vlink="#000099" alink="#000099">
〜中略〜
</body>
</html> |
サンプルページ
▼画像を配置を指定して1枚だけ表示する
<head>から</head>の間に以下のタグを入力します。
<style type=text/css>
<!--
body
{
background-image:url(ここに画像のファイル名を記入);
background-attachment:fixed; ← 画像を固定するという意味
background-repeat:no-repeat; ← 画像を1枚だけ表示するという意味
background-position:bottom left; ← 画像を表示する場所を指定
}
-->
</style> |
<html>
<head>
<title>
私のホームページ
</title>
<style type=text/css>
<!--
body
{
background-image:url(img/ic.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:bottom left;
}
-->
</style>
</head>
<body text="#999999" link="#0000FF" vlink="#000099" alink="#000099">
〜中略〜
</body>
</html> |
サンプルページ
bottom(下)→top(上)とcenter(中央)。left(左)→right(右)とcenter(中央)に変更できます。
|