背景画像background-imageと背景色background-colorを同時に設定/反映させたい

2020年5月19日

ボタンやシンプルなバナーなどを作成する時、画像でまとめて作るというシンプルな方法が簡単ではありますが、レスポンシブだと文字が見づらくなる…テキストは画像と一緒にするのではなくテキストはテキストとしてCSSを使用して画像と併用したい…という場合に使える「background」を用いた設定方法です。

background-image（背景画像）とbackground-color（背景色）で設定。



background-color: #265d9b;
background-image: url(img/flat-planicon1.png);
background-repeat: no-repeat;
background-position: 10px;

background-imageとbackground-colorでも良いのですが、「background」でまとめた方法がシンプルです。表示結果は同じです。



background:#265d9b url(img/flat-planicon1.png) no-repeat;
background-position: 10px;