色・背景
「background」プロパティ
「background」プロパティは、背景に関するすべてを指定するCSSプロパティです。
背景の色を変更したり、画像の表示を設定できます。
「background」プロパティの値
背景に関するすべてを指定する値は「カラー名」「16進数カラーコード」「RGB」「HSL」などの値や「imageタグ」を指定することができます。
※ブラウザの種類により、小数点以下の数値は切り上げされる場合がありますので小数点での指定は推奨できません。
また、「background」プロパティと同時に設定が出来るプロパティの種類がいくつかあります。
【プロパティの種類】
・background-color
・background-image
・background-size
・background-repeat
・background-position
・background-attachment
・background-clip
・background-origin
CSSで文字や背景や枠線に色を指定する4つの指定方法
「background」プロパティの指定方法
背景に関するすべてを指定する場合は、「background」プロパティを使い適応する値を指定することで実装できます。
「background」プロパティ
セレクタ{
background:背景に関する値;
}値例
/* カラー名値（一部） */
background: red;/* 赤 */
background: orange;/* オレンジ */
background: black;/* 黒 */
background: blue;/* 青 */
background: green;/* 緑 */
/* 16進数カラー値 */
background: #FF0000;/* 赤 */
background: #ff7200;/* オレンジ */
background: #000000;/* 黒 */
background: #0000FF;/* 青 */
background: #008000;/* 緑 */
/* rgb値 */
background: rgb(34, 12, 64);/* 赤 */
background: rgb(255, 114, 64);/* オレンジ */
background: rgb(0, 0, 0);/* 黒 */
background: rgb(0, 0, 255);/* 青 */
background: rgb(0, 128, 0);/* 緑 */
/* hsl値 */
background: hsl(30, 100%, 50%);/* 赤 */
background: hsl(30, 100%, 50%);/* オレンジ */
background: hsl(0, 0%, 0%);/* 黒 */
background: hsl(240, 100%, 50%);/* 青 */
background: hsl(120, 100%, 25%);/* 緑 */
/* hsl値 */
background: url("../img/image.png");/* 背景画像 */表示例
背景の色（赤）
背景の色（オレンジ）
背景の色（黒）
背景の色（青）
