Create a beautiful integration between background image and color

Question

User414668962 posted

Hi everyone!

I'd like to create a particular background for pages of my website.
My idea is a full page height image fixed with an overlay color gradient that start transparent and finish white.
I think it create a beautiful effect but with my code the image covers the gradient color...
I'd also like the image to adapt to the size of the screen.

Someone can help me?

Answer 1

User1535942433 posted

Hi Marcoda21,

I suggest you could try to use background-size:cover.It will resize the background image to cover the entire container, even if it has to stretch the image or cut a little bit off one of the edges.

 More details ,you could refer to below code:

<style>

        html, body {

            height: 100%;

        }

        body {

            background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url('image/image1.jpg');

            background-repeat: no-repeat;

            height:100%;

            background-size: cover;

        }

       

    </style>

Result:

Best regards,

Yijing Sun