<div class="hero"></div>

.hero {
  margin: 0;
  padding: 0;
  position: relative;
  min-height: 100vh;
  width: 100vw;
  background: transparent url("https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ") no-repeat left top;
  background-size: cover;
  
  &:after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(180deg, #851717 0%, #30328C 100%);
    mix-blend-mode: color;
  }
}