background-color

style.css

/* 透明（初期値） */
div.test { background-color: transparent;}

/* カラーコードで指定 */
div.test1 { background-color: #ff0;}

/* カラーネームで指定 */
div.test2 { background-color: red;}

/* rgb()関数で指定 */
div.test3 { background-color: rgb(0, 119, 204);}

/* rgba()関数で半透明を指定（最後の値が透明度: 0〜1） */
div.test4 { background-color: rgba(0, 0, 0, 0.5);}

/* CSS変数と組み合わせた実践例 */
:root { --main-bg: #f0f4ff;}
.card { background-color: var(--main-bg);}

/* ホバー時に背景色を変化させる実践例 */
button { background-color: #0077cc;}
button:hover { background-color: #005599;}

<p style="background-color: #ff0; ">背景色を『#ff0』に指定しています。</p>

デスクトップ

Chrome

1 以降 ○

Firefox

1 以降 ○

Safari

1 以降 ○

Edge

12 以降 ○

IE

11 ○

10 ○

9 ○

8 ○

7 ○

6 ○

Opera

3.5 以降 ○

2 以前 ×

モバイル

iOS Safari

1 以降 ○

Android Browser

4.4 以降 ○

3 以前 ×

Chrome Android

最新版 ○

デスクトップ版と同等の対応です

Firefox Android

最新版 ○

デスクトップ版と同等の対応です

※ バージョン情報は MDN に基づいています。

背景色を指定できます。色の指定方法は透明色の『transparent』、ウェブカラー、カラーネーム(色名)となります。

使用できるカラーネーム一覧はMOZILLAさんの公式ウェブサイトをご参照ください。
※『background-color』はこちらの記事でも詳しく解説しております。