[解決済み】background-imageの上に半透明のカラーレイヤー？

質問

DIVがあり、背景としてパターンを配置したいです。この模様はグレーです。そこで、もう少し素敵にするために、薄い透明な色の "レイヤー" をかぶせたいと思います。以下は、私が試したものですが、うまくいきませんでした。背景画像の上に色のついたレイヤーを置く方法はありますか？

以下は私のCSSです。

background: url('../img/bg/diagonalnoise.png');
background-color: rgba(248, 247, 216, 0.7);

解決方法は？

ここにあります。

.background {
    background:url('../img/bg/diagonalnoise.png');
    position: relative;
}

.layer {
    background-color: rgba(248, 247, 216, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

このためのHTMLです。

<div class="background">
    <div class="layer">
    </div>
</div>

もちろん、幅と高さを定義する必要があります。 .background クラスの中に他の要素がない場合、そのクラスは使用できません。