Unable to move my linear gradient to the bottom of my image

user_19832838 0
Viewed 33

I am very new to web development and I have come across an obstacle.

I want to have the linear gradient at the bottom of the image (so the image fades into black) however I'm not sure on how to bring it there. Would I need to change the size of the background image or the gradient, I'm not too sure. I will attach my css and an image.

Any help would be appreciated! image

*{
    margin:0;
    padding:0;
    box-sizing:border-box;

}
body{
    background-color:black;
    min-height:3000px;
    min-width:0px;
    background-image:url("images/background.png");
    background-repeat:no-repeat;
    
}
#section{
    object-fit:cover;
    position:absolute;
    width:100%;
    height:100%;
    object-fit:none;
    pointer-events:none;
    overflow:hidden;
    top:0;
    left:0;


    
}

section:before{
    content:'';
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 2000px;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 80%, #000 100%);
    z-index: 100000;

  }

linear-gradients css html
1 Answers

You can just apply it directly to your body's background image.

 body {
    background-color:black;
    min-height:3000px;
    min-width:0px;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0%), rgba(0, 0, 0, 100%)), url("images/background.png");
    background-repeat:no-repeat;
    
}
user_191614620
Related