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

HomeCSS辞典背景に画像 background
サイト内検索

背景に画像 background

背景画像を指定 (詳細情報)
字体 background-image: url(★);
指定

上の★の部分に背景に敷き詰める画像名を指定します。
指定する画像が違うフォルダにある場合は 画像タグページ の指定方法をご参考下さい。


追加可能なCSS(スタイルシート)
  • background-repeat: ★; 下記の画像の敷き詰め方法を指定。
     「repeat-x」 横にだけ画像を繰り返して表示します。
     「repeat-y」 縦にだけ画像を繰り返して表示します。
     「no-repeat」 敷き詰めずに画像1つだけを表示します。
  • background-position: ★ ★; 下記の画像の表示位置を指定。

    (横方向の表示位置と、縦方向の表示位置を同時に指定できます)

    ■横方向の指定 ★部分に指定してください。
     「left」 横方向の左側に画像を表示させます。
     「center」 横方向の真ん中に画像を表示させます。
     「right」 横方向の右側に画像を表示させます。

    ■縦方向の指定 ★部分に指定してください。
     「top」 縦方向の上に画像を表示させます。
     「center」 縦方向の真ん中に画像を表示させます。
     「bottom」 縦方向の下に画像を表示させます。
  • background-attachment: ★; 背景の画像をスクロールさせないようにする。
    (ページをスクロールさせるほど敷き詰めている場所に有効です)
     「fixed」 スクロールさせないように固定する。
     「scroll」 スクロールさせる(初期値)
例1 <div style="background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例2 <div style="background-repeat: repeat-x; background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例3 <div style="background-repeat: repeat-y; background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例4 <div style="background-repeat: no-repeat; background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です
例5 <div style="background-position: center bottom; background-repeat: no-repeat; background-image: url(img/test_bg01.gif); padding: 14px;">ホームページの素材屋です</div>
結果
ホームページの素材屋です


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


素材の森 素材NAVI 素材R 素材・壁紙 イラスト素材 素材・作成 素材ランキング 無料素材リンク 素材ファン
無料HP素材、ホームページテンプレート、HTMLタグ・CSS、質問・用語の検索 サイト内検索
素材ランキング 素材NAVI 素材の森 素材サーチ フリー素材 素材・画像 素材・壁紙 素材R Webランキング