【CSS】忘れやすい背景指定backgroundのショートハンド記法

背景レイアウトを指定するCSS

CSSでのレイアウトで背景を指定する際に使うbackgroundプロパティ。

background-color:#f00;  /*色指定

background-image:url(); /*画像指定

background-repeat:no-repeat; /* 画像繰り返し

background-position:left top; /* 画像位置指定

・・・

などの系列のプロパティを多く持っています。

各プロパティを別々に書くことも多いのですが、ショートハンドでまとめて書こうと思ったときに毎回、書き方(順番)を忘れてしまうのですよね・・(‘ω’;)

 

backgroundのショートハンド

background:  [色] [画像] [繰り返し] [配置位置] 

《記述例 》

background: #555 url(images/bg.jpg) repeat-x top left;

※正確には、background-sizeなどもう少し多く設定できるのですが、通常使う分ではこれで十分かと。

他の設定は追加で下に書けばいいだけだし。

 

という、メモでした。

 

コメント