https://hmaster.net/


HTMLタグとCSSを使いメモ帳だけで無料でホームページを作成する 方法を分かりやすく解説しているサイトです。 初心者向けに見やすい、読みやすい作りになっています。

背景画像の表示位置を指定する

{background-position:横方向の位置 縦方向の位置;}でボックスの 背景画像の表示位置(横方向、縦方向)を指定する ことができます。

■ 背景画像の表示位置

背景画像を表示できる位置は以下の通りです。

横方向
位置説明
left
center中央
right
縦方向
位置説明
top
center中央
bottom

【ブラウザ表示】

画像がボックスの左下に表示されています。


ソース

<p class="box13">画像がボックスの左下に表示されています。</p>

外部ファイル

p.box13{
border:1px solid;
background-position:left bottom;
background-image:url(../image/ball3.gif);
background-repeat:no-repeat;
height:70px;
}


<body>~</body>に直接記入する場合

<p style="border:1px solid; background-position:left bottom; background-image:url(../image/ball3.gif); background-repeat:no-repeat; height:70px;">
画像がボックスの左下に表示されています。
</p>

■ 表示位置を%やピクセルで指定する

背景画像の表示位置を%やピクセルで指定することもできます。
{background-position:10px 10px;}のように記述し左から10pxの位置、 上からは10pxの位置に表示するということになります。 デフォルトの値は{background-position:0% 0%;}です。

【ブラウザ表示】

画像がボックスの左から20pxの位置、 上から40pxの位置に表示されています。


ソース

<p class="pix">
画像がボックスの左から20pxの位置、
上から40pxの位置に表示されています。
</p>

外部ファイル

p.pix{
border:1px solid;
background-position:20px 40px;
background-image:url(../image/ball3.gif);
background-repeat:no-repeat;
height:70px;
}


<body>~</body>に直接記入する場合

<p style="border:1px solid; background-position:20px 40px; background-image:url(../image/ball3.gif); background-repeat:no-repeat; height:70px;">
画像がボックスの左から20pxの位置、
上から40pxの位置に表示されています。
</p>

このエントリーをはてなブックマークに追加 Instagram

■ その他の項目

枠線の太さを指定する
枠線の種類を指定する
枠線の色を指定する
個別の枠線を一括に指定する
ボックスの横幅、高さを指定する
外側、内側の余白を指定する
背景色や画像を指定する
背景画像の表示方法を指定する
ボックスを並べる
はみ出る部分を表示させる
ボックスの配置方法を指定する
背景画像の表示領域を指定する
枠線の4隅の角丸を指定する
枠線の4隅の角丸を個別に指定する

スタイルシート一覧のページに戻る