locked
Create a beautiful integration between background image and color RRS feed

  • 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?

    Monday, December 9, 2019 2:54 PM

All replies

  • 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

    Tuesday, December 10, 2019 7:25 AM