تکرار بکگراند تصویر در گرادینت

[Gh-Moradi]

سلام
یک گرایدنت دارم و میخوام پشتش رو بکگراند (تصویر) قرار بدم اما هرکاری در CSS کردم نتونستم
آیا میشه تصویر بکگراند رو در پشت گرادینت تکرار کنیم؟

<style>
div{
width: 100%;
height:400px;
background-image: url(http://bytegate.ir/wp-content/themes/remal/images/patterns/body-bg4.png);
background: linear-gradient(90deg, #f06, yellow,#f06);
</style>

<div></div>


به روش زیر میتونم خیلی راحت انجام بدم اما میخوام در یک سلکتور قرار بگیره

<style>
.abc{background-image: url(http://bytegate.ir/wp-content/themes/remal/images/patterns/body-bg4.png);width:100%;height:400px;}
.ab{
width: 100%;
height:400px;
background: linear-gradient(90deg, #f06, yellow,#f06);
}
</style>

<div class="ab"><div class="abc"></div></div>
آیا راه حلی داره؟