Is there a way to make the bottom half of a background image completely white?-CodePudding

new user here

I'm currently working on a personal project and wanted to know if there was a way to take this image, https://unsplash.com/photos/XXA8PTuLD1Y, and make the bottom half of it completely white using css? Thanks!

CodePudding user response：

Not sure why you'd want to do this (as opposed to cropping the image or sizing the container to clip it or whatever), but you could use a linear-gradient as a second background image to cover the bottom half.

.demo {
  background-image:
    linear-gradient(transparent 50%, white 50% 100%),
    url('https://images.unsplash.com/photo-1477414956199-7dafc86a4f1a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=3870&q=80');
  
  /* the rest is just display setup. not relevant to your question */
  background-size: cover;
  border: 2px solid red;
  aspect-ratio: 1.5/1;
  max-width: 300px;
}

<div class="demo"></div>

CodePudding user response：

There are 2 easy possibilities

Make the div next after img tag as position:absolute

.post-img{
    position: absolute;
    top: calc(50% - 4px);
    background: red;
    width: -webkit-fill-available;
    height: 50%;
}
img{width:100%}

<html lang="en">
<body>
    <div style="position:relative">
        <img src="https://picsum.photos/id/237/200/300"/>
        <div class="post-img"></div>
    </div>
</body>
</html>

OR

This would be a similar output to what you are looking for

body {
    height: 100%;
    background: url('image.jpg') no-repeat, #f00;
    background-size: 100%;
    background-position-y: 60%;
}