You can clip background image by using clip-path in css to make it look nicer.
You can also use multiple properties for background-image property in css. In this example, I used linear-gradient (green) and clip-path properties.
Please note that I have learned this from the udemy course by Jonas Schmedtmann.
Example Picture
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="css/icon-font.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<title>clip-path and linear-gradient</title>
</head>
<body>
<header class="header">
</header>
</body>
</html>
CSS
You need to use clip-path to use polygon shaped image. You need to provide points (coordinates) of value pair x (horizontal), y (vertical) for your case.
For example, you will need to provide 4 points for rectangle and 3 for triangle. The order of the point always starts from left top and clockwise.
Please note that you can use multiple properties for background-image separated by comma. In this example, I used linear-gradient and URL to load the image
.header {
height: 95vh;
background-image: linear-gradient(
to right,
#7ed56fb0,
#28b4858e),
url("../img/hero.jpg");
background-size: cover;
background-position: top;
/* Trapezoid */
clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);
/* Triangle */
clip-path: polygon(0 0, 100% 50%, 0 100%)
/* you can use pixel or vh */
/* clip-path: polygon(0 0, 100% 0, 100% 75vh, 0 100%); */
}