擬似要素を使って画像と背景色を重ねる方法

完成形はこのようになります

HTMLの記述はこちら

<div class="sampleBox_210207">
<img src="../images/common/sample_bg01.JPG" alt="">
</div>

CSSの記述はこちら

▼ パソコン

.sampleBox_210207 {
		position: relative;
		z-index: 0;
		width: 500px;
		margin: 0 auto;
	}

	.sampleBox_210207:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: aqua;
		top: 3%;
		right: -3%;
		z-index: -1;
	}

▼ スマホ

	.sampleBox_210207 {
		position: relative;
		z-index: 0;
		max-width: 260px;
		margin: 0 auto;
	}

	.sampleBox_210207:after {
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: aqua;
		top: 3%;
		right: -3%;
		z-index: -1;
	}

解説はこちら

背景色と画像を「z-index」で重なり順を指定します。
「sampleBox_210207」を「position: relative;」にして、擬似要素で「after」を設定しましょう。これを「position: absolute;」に。

z-indexで重なり順を決めます。
「sampleBox_210207」には「z-index: 0;」、「after」に「z-index: -1;」にします。
あとは、お好みでtopやrightなどの位置設定をしてください。