CSS – background image with linear-gradient and clip-path

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

Trapezoid clip
Triangle

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

Leave a Reply

Your email address will not be published.