背景色、背景画像の設定は、ページ全体又は表(テーブル)のみと思われがちですが、CSSにてボックスとみなした各タグの装飾にも指定可。
例:段落の1文字目の背景、フォームメール、ページのブロック別の背景etc
※カラーリスト(ブラウザ対応色名)
※サイズ指定単位リスト
1.背景色
タグ名 { background-color: 色名; } |
2.背景画像と表示スタイルいろいろ
●表示サイズより画像が小さい場合は並べて表示 |
タグ名 { background-image: url(画像ファイル名又はURL); } |
●左隅に1枚だけ表示 |
タグ名 { background-image: url(画像ファイル名又はURL); background-repeat: no-repeat; } |
●上部に1行表示 |
タグ名 { background-image: url(画像ファイル名又はURL); background-repeat: repeat-x; } |
●左隅に1列表示 |
タグ名 { background-image: url(画像ファイル名又はURL); background-repeat: repeat-y; } |
●表示位置を数値や用語で指定 |
タグ名 { background-image: url(画像ファイル名又はURL); background-repeat: no-repeat; background-position: 100% 0%; } |
Webページをhtmlモードで表示させ、上からあるタグの<head>と</head>を見つけてその間に下記表のタグを記述する。
3.表示位置を数値や用語で指定
●表示位置を数値や用語で指定例 |
タグ名 { background-image: url(画像ファイル名又はURL); background-repeat: no-repeat; background-position: 100% 0%; } |
※ブラウザの大きさを100%として、左から100%の割合の位置(右隅)&上から0%(=上端)表示
※%のところは、pxで指定しても可
例:50px 100px (左から50px、上から100pxの位置に表示)
※サイズ指定単位リスト
●表示位置を数値や用語で指定・いろいろ | ||||||||||||||||
●= left right center % px ▲= top botom % px ※使用例:background-position: center right; (横中央&右側に表示) |
4.背景画像を動かないようにする
タグ名 { background-image: url(画像ファイル名又はURL); background-repeat: no-repeat; background-attachment: fixed; } |
※no-repeatで1枚のみ背景画像を表示させていると、下へスクロールした場合、背景画像は見えなくなってしまう点を防ぐ。
※背景画像はそのまま、記事部分だけスクロール
5.背景色と背景画像を1行で指定
タグ名 { background: 色 url(画像ファイル名) 表示スタイル ; } |