background-image 背景画像を指定する
背景画像を指定する際に使用します。 背景画像は次のようなURLで指定します。
background-image: url(./img/bg_test.gif)
または
background-image: url("./img/bg_test.gif")
または
background-image: url(http://kikky.net/pc/img/bg_test.gif)
相対位置で記述する場合の基準位置は、『スタイルが記述されている場所』になります。
外部スタイルシートを使用する場合にはHTML文書とCSS文書の階層が違うと画像ファイルの指定も違うので注意してください。
HTML文書が基準ではなく、CSS文書が基準となります。
またCSS文書内でさらにCSS文書をインポート（呼び出し）している場合も、背景画像プロパティが記述されているCSS文書が基準となります。
- ルートディレクトリ
-
- css
-
- CSS文書(style1.css)
- img
-
- 画像ファイル(bg1.jpg)
-
- HTML文書(index.html)
- CSS文書(style2.css)
- 画像ファイル(bg2.jpg)
上のような場合の例
style1.css
background-image: url(../img/bg1.jpg);
background-image: url(../bg2.jpg);
background-image: url(../bg2.jpg);
style2.css
background-image: url(./img/bg1.jpg);
background-image: url(bg2.jpg);
background-image: url(bg2.jpg);
@importの例
style2.css
@import url("./css/style1.css");
style1.css
background-image: url(../img/bg1.jpg);
background-image: url(../bg2.jpg);
background-image: url(../bg2.jpg);
対応ブラウザ
- IE4
- IE5
- IE6
- IE7
- IEMac
- Netscape6
- Netscape7
- Firefox1
- Firefox2
- Firefox3
- Opera6
- Opera7
- Opera8
- Opera9
- Safari1
- Safari2
- Safari3
仕様
なし
値
| 値 | 内容 |
|---|---|
| url(【画像ファイル】) | 背景に画像ファイルを指定する |
| none | 背景に画像ファイルを使用しない [初期値] |
関連記事
- composit
- volume 音量を指定する
- voice-family 声の種類を指定する
- stress アクセントの強さを指定する
- speech-rate 読む速度を指定する
- speak-punctuation 句読点や記号を読むかどうかを指定する
- speak-numeral 数字の読み方を指定する
- speak-header 表の見出しを読むタイミングを指定する
- speak 読み方を指定する
- richness 声の豊かさ・明瞭さを指定する
- play-during バックグラウンド・サウンドを指定する
- pitch-range 声の高さの変化する幅を指定する
- pitch 声の高さを指定する
- pause 読み上げ休止に関する指定をまとめて行う
- pause-after 読み上げ休止時間・箇所を指定する
- pause-before 読み上げ休止時間・箇所を指定する
- elevation 声が聞こえてくる高さを指定する
- cue-before サウンドアイコンの内容と鳴らす箇所を指定する
- cue-after サウンドアイコンの内容と鳴らす箇所を指定する
- cue サウンドアイコンに関する指定をまとめて行う
- azimuth 声が聞こえてくる角度を指定する
- xray レントゲン（X線）で撮影されたようなフィルタ効果を指定する
- wave 波形効果を指定する
- shadow モーションブラー効果を指定する
- motionblur モーションブラー効果を指定する
- matrix 傾けたりサイズを変更する
- mask マスク効果を指定する
- light 光源から光を当てた効果を指定する
- invert 色反転のフィルタ効果を指定する
- ICMFilter ICMファイルと交換して色調を変化させる
- gray グレー効果のフィルタ効果を指定する
- gradient グラデーション効果を指定する
- glow 発光効果を指定する
- flipv 左右反転のフィルタ効果を指定する
- fliph 左右反転のフィルタ効果を指定する
- engrave エンボスフィルタ効果を指定する
- emboss エンボスフィルタ効果を指定する
- dropShadow シャドウフィルタ効果を指定する
- chroma 抜きたい色を指定する
- blur X線効果のフィルタ効果を指定する
- BasicImage 各種フィルタ効果を一括して指定する
- AlphaImageLoader PNG画像を表示する
- alpha 半透明のフィルタ効果を指定する
- zoom 拡大・縮小表示する
- writing-mode 文字表記の方向（縦横）を指定する
- word-break 文の改行の仕方について指定する
- text-underline-position 下線の表示位置を指定する
- text-overflow はみ出した場合の表示処理を指定する
- text-kashida-space 文字との余白割合を指定する
- text-justify 均等割付の形式を指定する
- text-autospace アルファベット等との間隔を指定する
- scrollbar-shadow-color スクロールバーの影の色を指定する
- scrollbar-highlight-color スクロールバーのハイライトの色を指定する
- scrollbar-face-color スクロールバーの表面の色を指定する
- scrollbar-darkshadow-color スクロールバーの右端と下端の色を指定する
- scrollbar-base-color スクロールバーのベース色を指定する
- scrollbar-arrow-color スクロールバーの矢印の色を指定する
- scrollbar-3dlight-color スクロールバーの左端と上端の色を指定する
- ruby-position ルビの表示位置を指定する
- ruby-overhang ルビの表示領域を指定する
- ruby-align ルビの行揃え位置を指定する
- overflow-y はみ出た内容の表示方法を指定する
- overflow-x はみ出た内容の表示方法を指定する
- line-break 禁則処理を行うかどうかを指定する
- layout-grid-type グリッドのタイプを指定する
- layout-grid-mode 行・文字グリッドの有効・無効を指定する
- layout-grid-line 行グリッドの高さを指定する
- layout-grid-char 文字グリッドの幅を指定する
- layout-grid グリッドに関する指定をまとめて行う
- layout-flow 文字の表示方向（筆記方向）を指定する
- ime-mode テキスト入力時のIMEの状態を指定する
- filter 画像・テキストにフィルタ効果を与える
- behavior 外部スクリプトを適用する
- opacity 不透明度を指定する
- layer-background-image レイヤーの背景画像を指定する
- layer-background-color レイヤーの背景色を指定する
- include-source 他のHTML文書をレイヤー表示する
- -moz-outline-style アウトラインの形状を指定する
- -moz-outline-width アウトラインの幅を指定する
- -moz-outline-color アウトラインの色を指定する
- -moz-border-radius-bottomright 右下の角の丸みを指定する
- -moz-border-radius-bottomleft 左下の角の丸みを指定する
- -moz-border-radius-topright 右上の角の丸みを指定する
- -moz-border-radius-topleft 左上の角の丸みを指定する
- -moz-border-radius 角の丸みを指定する
- -moz-opacity 不透明度を指定する
- quotes 引用符を設定する
- cursor マウスカーソルの形状を指定する
- counter-reset 要素の連番（カウンタ）の値をリセットする
- counter-increment 要素の連番（カウンタ）の値を進める
- counters 入れ子になったカウンタの値を表示する
- counter カウンタの値を表示する
- content 内容（コンテンツ）を挿入する
- @media 表示対象のデバイスを指定する
- @import 外部スタイルシートファイルを読み込む
- @font-face ローカルにはないフォントを読み込んで使用する
- @charset 外部スタイルシートファイルの文字コードを指定する
- outline-width アウトラインの太さを指定する
- outline-style アウトラインのスタイルを指定する
- outline-color アウトラインの色を指定する
- outline アウトラインのスタイル・太さ・色を指定する
- :visited 訪問済みのリンク色を指定する
- :link リンク色（未訪問リンク）を指定する
- :hover 要素にマウスが重なった場合のスタイルを指定する
- :focus 要素がフォーカスされている場合のスタイルを指定する
- :first-line 最初の１行にスタイルを指定する
- :first-letter 最初の１文字にスタイルを指定する
- :first-child 最初の子要素にスタイルを指定する
- :before 要素の前に表示する文字などを指定する
- :after 要素の後に表示する文字などを指定する
- :active マウスボタンが押されている場合のスタイルを指定する
- !important 指定されたスタイルを優先する
- widows 最低限必要な行数を指定して改ページを制御する
- size 用紙サイズと方向を指定する
- page-break-inside 要素内での改ページを制御する
- page-break-before 印刷の改ページ箇所を指定する
- page-break-after 印刷の改ページ箇所を指定する
- @page 特定のデバイスでの表示範囲を指定する
- orphans 最低限必要な行数を指定して改ページを制御する
- marks トンボを出力するかどうかを指定する
- marker-offset マーカーとの間隔を指定する
- list-style-type マーカー文字の種類を指定する
- list-style-position マーカーの表示位置を指定する
- list-style-image マーカー画像を指定する
- list-style マーカーに関する指定をまとめて行う
- table-layout テーブル（表）の表示方法を指定する
- empty-cells 空白セルのボーダーの表示・非表示を指定する
- caption-side テーブル（表）のキャプションの位置を指定する
- border-spacing セルのボーダーの間隔を指定する
- border-collapse セルのボーダーの表示の仕方を指定する
- padding-top 上パディングを指定する
- padding-right 右パディングを指定する
- padding-left 左パディングを指定する
- padding-bottom 下パディングを指定する
- padding パディングに関する指定をまとめて行う
- margin-top 上マージンを指定する
- margin-right 右マージンを指定する
- margin-left 左マージンを指定する
- margin-bottom 下マージンを指定する
- margin マージンに関する指定をまとめて行う
- border-width ボーダーの太さを指定する
- border-top-width 上ボーダーの太さを指定する
- border-top-style 上ボーダーのスタイルを指定する
- border-top-color 上ボーダーの色を指定する
- border-top 上ボーダーのスタイル・太さ・色を指定する
- border-style ボーダーのスタイルを指定する
- border-right-width 右ボーダーの太さを指定する
- border-right-style 右ボーダーのスタイルを指定する
- border-right-color 右ボーダーの色を指定する
- border-right 右ボーダーのスタイル・太さ・色を指定する
- border-left-width 左ボーダーの太さを指定する
- border-left-style 左ボーダーのスタイルを指定する
- border-left-color 左ボーダーの色を指定する
- border-left 左ボーダーのスタイル・太さ・色を指定する
- border-color ボーダーの色を指定する
- border-bottom-width 下ボーダーの太さを指定する
- border-bottom-style 下ボーダーのスタイルを指定する
- border-bottom-color 下ボーダーの色を指定する
- border-bottom 下ボーダーのスタイル・太さ・色を指定する
- border ボーダーのスタイル・太さ・色を四方まとめて指定する
- z-index 重なりの順序を指定する
- width 幅を指定する
- visibility ボックスの表示・非表示を指定する
- unicode-bidi Unicodeの文字表記の方向を上書きする
- top 上からの配置位置（距離）を指定する
- right 右からの配置位置（距離）を指定する
- position ボックスの配置方法（基準位置）を指定する
- overflow はみ出た内容の表示方法を指定する
- min-width 幅の最小値を指定する
- min-height 高さの最小値を指定する
- max-width 幅の最大値を指定する
- max-height 高さの最大値を指定する
- left 左からの配置位置（距離）を指定する
- height 高さを指定する
- float 左または右に寄せて配置する
- display 要素の表示形式（ブロック・インライン）を指定する
- direction 文字表記の方向（左右）を指定する
- clip ボックスを切り抜き表示（クリッピング）する
- clear 回り込みを解除する
- bottom 下からの配置位置（距離）を指定する
- background-repeat 背景画像のリピートの仕方を指定する
- background-position-y 背景画像の縦位置を指定する
- background-position-x 背景画像の横位置を指定する
- background-position 背景画像の表示開始位置を指定する
- background-color 背景色を指定する
- background-attachment 背景画像の固定・移動を指定する
- background 背景に関する指定をまとめて行う
- word-wrap 単語の途中で改行するかどうかを指定する
- word-spacing 単語の間隔を指定する
- white-space ソース中のスペース・タブ・改行の表示の仕方を指定する
- vertical-align 縦方向の揃え位置を指定する
- text-transform テキストの大文字表示・小文字表示を指定する
- text-shadow 文字に影をつける
- text-indent 一行目のインデント幅を指定する
- text-decoration テキストの下線・上線・打ち消し線・点滅を指定する
- text-align 行揃えの位置・均等割付を指定する
- line-height 行の高さを指定する
- letter-spacing 文字の間隔を指定する
- font-weight フォントの太さを指定する
- font-variant フォントをスモールキャップにする
- font-style フォントをイタリック体・斜体にする
- font-stretch フォントを縦長・横長にする
- font-size-adjust フォントのサイズを調整する
- font-size フォントのサイズを指定する
- font-family フォントの種類を指定する
- font フォントに関する指定をまとめて行う
- color 文字色（前景色）を指定する
スポンサーリンク
