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

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!

htmlcss


Solution 1:[1]

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>

Solution 2:[2]

There are 2 easy possibilities

  1. 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
  1. This would be a similar output to what you are looking for

body {
    height: 100%;
    background: url('https://picsum.photos/id/237/200/300') no-repeat, #f00;
    background-size: 100%;
    background-position-y: 60%;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2

Related Questions