[CSS] 背景色と背景画像を同時に指定する

2020年6月6日

CSSで背景色と背景画像を同時に指定するサンプルです。

サンプルソース

例）背景色と背景画像を同時に指定する

<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<style>
.back01{
  background:url('caution.png');
  background-repeat:no-repeat;
  background-position:2px 50%;
  background-color:skyblue;
  border:1px solid #808080;
  padding-left:20px;
}
</style>
</head>
<body>
  <div class="back01">サンプル</div>
</body>
</html>

<head>

<style>

.back01{

background:url('caution.png');

background-repeat:no-repeat;

background-position:2px 50%;

background-color:skyblue;

border:1px solid #808080;

padding-left:20px;

}

</style>

</head>

<body>

</body>

</html>

表示サンプル

以下のように画像と背景色が同時に指定されます。

CSS

Posted by tora