使用 css 使图像背景淡入底部

Question

I have a background image set up on my home page.

and for mobile as you see the image has a sharp cut i would like to have a background such as:

so that background has a gradient fade till bottom is there a way to achieve this with css or designing and using a background that way is the best option?

Answer 1

Use body or container background (div)

 #container{ width:100%; height:100vh; background: rgb(252,161,120); background: linear-gradient(0deg, rgba(252,161,120,1) 0%, rgba(247,147,101,1) 30%, rgba(246,123,71,1) 66%, rgba(244,102,42,1) 100%); }

 <div id="container"></div>