背景に画像 background｜CSS辞典｜HTMLタグ・CSS

Home≫CSS辞典≫背景に画像 background

背景に画像 background

≪ 背景カラー background	【 HOME 】	線の種類 border-style ≫

Yahoo!ブックマークに登録

Google Bookmarks に追加

はてなブックマークに登録

livedoorに記事をクリップ

背景画像を指定（詳細情報）
字体	background-image: url(★);
指定	上の★の部分に背景に敷き詰める画像名を指定します。指定する画像が違うフォルダにある場合は画像タグページの指定方法をご参考下さい。追加可能なCSS（スタイルシート） background-repeat: ★;　下記の画像の敷き詰め方法を指定。　「repeat-x」横にだけ画像を繰り返して表示します。　「repeat-y」縦にだけ画像を繰り返して表示します。　「no-repeat」敷き詰めずに画像１つだけを表示します。 background-position: ★ ★;　下記の画像の表示位置を指定。（横方向の表示位置と、縦方向の表示位置を同時に指定できます） ■横方向の指定　★部分に指定してください。　「left」横方向の左側に画像を表示させます。　「center」横方向の真ん中に画像を表示させます。　「right」横方向の右側に画像を表示させます。 ■縦方向の指定　★部分に指定してください。　「top」縦方向の上に画像を表示させます。　「center」縦方向の真ん中に画像を表示させます。　「bottom」縦方向の下に画像を表示させます。 background-attachment: ★;　背景の画像をスクロールさせないようにする。（ページをスクロールさせるほど敷き詰めている場所に有効です）　「fixed」スクロールさせないように固定する。　「scroll」スクロールさせる（初期値）
例１	<div style="background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果	ホームページの素材屋です
例２	<div style="background-repeat: repeat-x; background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果	ホームページの素材屋です
例３	<div style="background-repeat: repeat-y; background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果	ホームページの素材屋です
例４	<div style="background-repeat: no-repeat; background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果	ホームページの素材屋です
例５	<div style="background-position: center bottom; background-repeat: no-repeat; background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果	ホームページの素材屋です

≪ 背景カラー background	【 HOME 】	線の種類 border-style ≫

練習用書き込みフォーム（サンプル表示）

素材の森

素材NAVI

素材R

素材・壁紙

イラスト素材

素材・作成

素材ランキング

無料素材リンク

素材ファン

無料ＨＰ素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索

サイトの説明

素材使用方法

質問集/用語集

作成練習場

カラー見本