ワンポイントアドバイス！

装飾の画像は背景にしてみましょう。

CSSの記述【背景】

背景
background-color背景色を指定する
background-attachment背景画像の固定・移動を指定する
background-image背景画像を指定する
background-repeat背景イメージの繰り返し方法を指定する
background-position背景イメージの位置を指定する
background

background-color
background-attachment
background-image
background-repeat
background-position
背景のプロパティを一括で指定

  • ※順番の指定はなし
background-size背景画像のサイズを指定する
background-color
記述例値意味
background-color:#333333;「#000000」16進法の文字列
カラーネーム
rgbaの記述等		背景色の指定
background-attachment
記述例値意味
background-attachment: fixed;「fixed」背景画像の位置が固定
「scroll」背景画像も移動		スクロールに伴って移動するかどうかを指定
background-image
記述例値意味
background-image:url("images/sample_img001.jpg");url("");で画像を指定
初期値はurl("none");		背景画像の指定
background-repeat
記述例値意味
background-repeat:no-repeat;「repeat」繰り返して表示：初期値
「repeat-x」横方向にのみ背景画像を繰り返し
「repeat-y」縦方向にのみ背景画像を繰り返し
「no-repeat」一回だけ表示		背景画像を繰り返しを指定
background-position
記述例値意味
background-position:top left;置を表すキーワードで指定「left,center,right」「top,center,bottom」
%値で指定
数値で指定		背景画像の表示開始位置を%値や数値で指定
background
記述例値意味
background:#fff url("images/sample_img001.jpg") no-repeat top left fixed;※順番の指定はなし背景のプロパティを一括で指定
background-size
記述例値意味
background-size:400px;px,%の数値背景画像のサイズを指定（数値）
background-size:cover;「auto」自動的に算出（初期値）
「contain」縦横比は保持して、背景領域に収まる最大サイズになるように背景画像を拡大縮小する
「cover」縦横比は保持して、背景領域を完全に覆う最小サイズになるように背景画像を拡大縮小する		背景画像のサイズを指定する際に使用
キーワード