ホームページ作成・HTML・アクセスアップ・スタイルシート・SEO・無料
ホームページ作成講座では、これからホームページを作成しようとしている人に、ホームページの作成方法を基本から、 HTML、スタイルシート、
アクセスアップ、アフィリエイトまで解説します。「初心者のかたにも分かる」を目標にしています。 このページがあなたのお役に立てれば幸いです。

背景画像を一枚だけ好きな位置に固定して表示する


スタイルシートでページの背景に指定した画像を一枚だけ、固定して好きなところに表示するには

これまでに出てきたbackground-repeat:、background-position:、background-attachment:の三つのプロパティを使います。

値の指定の仕方などはこれまでのページと同じです。

表示例はこちら

ソース
<html>
<head>
<title>ホームページ作成・サンプル5</title>
<style type="text/css">
body {
background-image:url(cat.gif); background-repeat:no-repeat;
background-position:100% 0%; background-attachment:fixed;
}

</style>
</head>
<body>
<table border="10" width="100%" height="1000">
<tr><td>
<h1>
背景画像が右上に固定されて表示されています。
</h1>
<br><br>
<a href="../fixedlikeone.html">戻る</a>
<br><br>
<a href="../../../index.html">ホームページ作成・HTML</a>
</td></tr>
</table>
</body>
</html>


<< 「背景画像を一枚だけ好きな位置に表示する」へ     「背景画像を縦方向に繰り返し表示する」へ >>



ホームページ作成とHTML>>スタイルシートの書き方講座>>背景画像を一枚だけ好きな位置に固定して表示する

©Copyright Hiroto.A ホームページ作成とHTML初心者 All Rights Reserved