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%); */ }