How do I make the top of an image blend with a background color CSS?-CodePudding

I have the following in my html file:

.sectionone{
width: 100%;
background-color: blue;
background-image: image.png;
background-size: contain;
background-position: bottom;
background-repeat: no-repeat;
min-height: 500px;
}

<!DOCTYPE html>
<html>
  <head>
  </head>
<body>
  <section>
    <div >
    </div>
  </section>
</body>
</html>

But when the screen is smaller and I get to see the background color I can see a very thin white line between the top of the image and the bottom of the background color. Is there any way to either blend or fix this? Here is a screenshot:

CodePudding user response：

It's very simple dear! I have 2 solutions for this problem.
First: If you have not reset the whole CSS then do it. May be it will solve the problem. For resetting the CSS write this code at the top of your CSS file.

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

Second Give top negative margin to your image. like this

img{margin-top: -5px}

I hope one of them will solve your problem.

CodePudding user response：

I guess you can try using a negative value of margin-top for the next div after img for a quick fix.

You should add minimal reproducible code, so that people can understand your problem and help you.

CodePudding user response：

In your code ,you could use the background-blend-mode attribute in css file for blending your image with the background color. Blend Mode helps to blend your image thicker or lighten with the background.

.sectionone {
        width: 100%;
        background-color: blue;
        background-image: image.png;
        background-size: contain;
        background-position: bottom;
        background-repeat: no-repeat;
        min-height: 500px;
        background-blend-mode: thicker; //changes in your code
        }

Hope, you could get a solution.