background

このエントリーをはてなブックマークに追加

backgroundプロパティは背景に関する指定を行うためのプロパティです。

background-sizebackground-originbackground-clipbackground-positionbackground-attachmentbackground-repeatbackground-imagebackground-colorの指定をまとめて指定できます。

.target{
	background:#FFF url("aaa.jpg") no-repeat 10px left;
}

値が複数指定されている場合は先に書かれている値をbackground-positionに適応し、その後に書かれている値をbackground-sizeに適応します。(ただし、キーワードなどで値が指定されている場合は無視されます)

.target{
	background:10px left 20px;
}

この場合はbackground-positionに「10px left」が適応され、background-sizeに「20px」が適応されます。

「padding-box」、「border-box」、「content-box」は先に書かれている記述がbackground-originに適応され、後の書かれている記述がbackground-clipに適応します。

複数の背景画像を指定したい場合は,(カンマ)区切りで指定を行ないます。ただしbackground-colorは最後の指定にしか記述してはいけません。(この記述はIE8以下ではサポートされていません)

.target{
	background:url("aaa.jpg") no-repeat 10px left,#000 repeat-x top left;
}

参考URL

3.10. Backgrounds Shorthand: the ‘background’ property - W3C

登録日 : 2014年01月14日 最終更新日 : 2014年1月14日

同じカテゴリー(Background)のエントリー

検索

スポンサードリンク

バージョン

リファレンス