backgroundは省力形でまとめて書ける
背景指定の省略形です。
省略したbackgroundしか使わないようにすれば、短く表記
できます。
.hitokage{
background: #000 url(image/hitkage.gif) repeat-x fixed right bottom;
}
上の例は「background-color」「background-image」「background-repeat」「background-attachment」「background-position」って順番に記述しています。
backgoundプロパティー種類
①background-color:
②background-size: ※ここにcoverはよく使う♪
③background-image:url( ) ※カッコ内はクォーテーションはつけない
④background-position:
⑤background-repeat: repeat-〇 ←あまり使わない
※⑥background-attachment←ほとんど使わない
background-positionの使い方、意味
背景画像の位置の初期値を指定します。
何も指定しなければ左上端(top leftまたは0 0)の状態です。
top・right・bottom・left・center で指定。
※組み合わせての指定も可能。
例)background-position:top right
; ←こうすれば、右上に表示される♪
それ以外にもpxやem,%で細かい位置の調整もできる。
例)background-position: 50px 100px
; ←topから50px leftから100pxの状態です。
ちなみに、ドットインストールの動画では、
background-size:cover
background-position: 50% 50%
; ※垂直方向 水平方向 の順で使用していました♪
最後に、
知らなかったbackground-repeatの使い方を書いておきます。
※使うことはほとんどないように思います
名前の通り、背景画像の繰り返し方法を指定します。
何も指定しなければ縦横方向
に繰り返される repeat がかかっている状態です。
background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: no-repeat;
repeat-xは横方向だけに
・repeat-yは縦方向だけに
指定された背景画像を繰り返します。
no-repeatは背景画像を繰り返さないです。