在背景上添加带有图像的非矩形标题

Question

我在Photoshop上设计了一个网站，我想使用BOOTSTRAP来实现它。当我使用其他方法时，我发现并不是一半的连帽衫都具有背景，但是所有的连帽衫都具有相同的背景。有人知道我该怎么做吗？ https://i.stack.imgur.com/708Bt.png

我忘记添加自己的代码。这是我的代码：

#banner {
  background-color: #fc98cc
  /*linear-gradient(to right, #fea7d6, #fb8ec6);*/
}

.bannerimg {
  width: 100%;
  height: auto;
  position: relative;
  left: 80px;
  top: 90px;
}

.text-right {
  padding-right: 150px !important;
}

.promo {
  padding-top: 7%;
  padding-right: 60%;
  align-items: center;
}

.promo-title {
  color: black;
  font-size: 50pt;
  font-weight: 600;
  font-family: 'Bahnschrift';
}

.promo-title1 {
  color: black;
  font-size: 50pt;
  margin-top: 10px;
  margin-bottom: 40px;
  font-family: 'Bahnschrift';
}

 :root {
  --width: 100%;
  --height: 300px;
  --top-color: #fc98cc;
  --bottom-color: #fff;
}

.separator {
  width: var(--width);
  height: var(--height);
  background-image: linear-gradient(to bottom right, var(--top-color), var(--top-color) 50%, var(--bottom-color) 50%, var(--bottom-color));
}

<section id="banner">
  <div class="container">
    <div class="row">
      <div class="col text-right promo">
        <h1 class="promo-title">BIRD HOODIE</h1>
        <h1 class="promo-title"><b>SHOP NOW</b></h1>
        <p>lorem ipsum idorThe most commonly used syntax is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3's syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss. The second, older syntax
          is known as the indented syntax (or just “.sass”).</p>
      </div>
      <div class="col">
        <a href="#"><img src="images/hoodie.png" class="bannerimg"></a>
      </div>
    </div>
  </div>
  <div class="separator"></div>
</section>