背景・画像・好き・位置・スタイルシート・ホームページ作成

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

プロパティbackground-position:
値%

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

background-repeat:に加えてbackground-position:プロパティを使います。

値は%で左上からの距離を指定します。

値の指定の仕方ですが、左上を座標(0, 0)としてそこからの距離で指定します。

右上に表示したい場合はbackground-position:100% 0%;になります。

この例からも分かるように、位置は横軸縦軸の順で指定します。

ソース例

<html>
<head>
<title>ホームページ作成・サンプル４</title>
<style type="text/css">
body { background-image:url(cat.gif); background-repeat:no-repeat; background-position:50% 50%; }
</style>
</head>
<body>
<h1>
背景画像が一枚だけ中央に表示されています。
</h1>
<br><br>
<a href="../likeone.html">戻る</a>
<br><br>
<a href="../../../index.html">ホームページ作成・HTML</a>
</body>
</html>

表示例はこちら

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

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