https://hmaster.net/


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

背景画像の表示方法を指定する

{background-repeat:表示方法;}でボックスの背景画像の表示方法を指定する ことができます。

■ 背景画像の表示方法

表示方法は以下の通りです。

表示方法説明
repeat縦方向と横方向に背景画像を繰り返して表示します。(デフォルト)
repeat-x横方向だけ繰り返して表示します。
repeat-y縦方向だけ繰り返して表示します。
no-repeat背景画像を繰り返さず画像を1枚だけ表示します。

【ブラウザ表示】

画像が横方向に繰り返して表示されています。

画像が縦方向に繰り返して表示されています。

画像が単体で1枚だけ表示されています。


ソース

<p class="box10">画像が横方向に繰り返して表示されています。</p>
<p class="box11">画像が縦方向に繰り返して表示されています。</p>
<p class="box12">画像が単体で1枚だけ表示されています。</p>

外部ファイル

p.box10{
border:1px solid;
background-repeat:repeat-x;
background-image:url(../image/ball3.gif);
height:70px;
}
p.box11{
border:1px solid;
background-repeat:repeat-y;
background-image:url(../image/ball3.gif);
height:70px;
}
p.box12{
border:1px solid;
background-repeat:no-repeat;
background-image:url(../image/ball3.gif);
height:70px;
}


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

<p style="border:1px solid; background-repeat:repeat-x; background-image:url(../image/ball3.gif); height:70px;">
画像が横方向に繰り返して表示されています。
</p>
<p style="border:1px solid; background-repeat:repeat-y; background-image:url(../image/ball3.gif); height:70px;">
画像が縦方向に繰り返して表示されています。
</p>
<p style="border:1px solid; background-repeat:no-repeat; background-image:url(../image/ball3.gif); height:70px;">
画像が単体で1枚だけ表示されています。
</p>

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

■ その他の項目

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

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