how to apply background image to css gradient div?

Question

<div>
  background image with gradient goes here
</div>

div{
background: rgb(0,170,175);
background: linear-gradient(90deg, rgba(0,170,175,1) 0%, rgba(0,170,175,1) 35%, rgba(0,170,175,0.28) 100%);
background-image: url('https://cssgradient.io/images/css-gradient-swatches-a67daaf7.svg');
}

What do you mean with "apply background image to css gradient div"? — MARSHMALLOW, Apr 24 '20 at 22:06
a div should contain both properties gradient background and background image — qureshikareem, Apr 24 '20 at 22:10
Your question has already been answered here: https://stackoverflow.com/a/2547064/4584472 — Luckyfella, Apr 24 '20 at 22:15

score 0 · Accepted Answer · answered Apr 24 '20 at 22:10

You can combine a gradient and a background image by putting them into the same (not seperate) background setting, separated by a comma:

div{
height: 400px;
background: linear-gradient(90deg, rgba(0,170,175,1) 0%, rgba(0,170,175,1) 35%, rgba(0,170,175,0.28) 100%), url('https://cssgradient.io/images/css-gradient-swatches-a67daaf7.svg');
}

<div></div>

how to apply background image to css gradient div?

1 Answers1