よくビジネス系のページや若者向けのページに多いのが、背景を斜めにしてその上にテキストを乗せるパターン。
背景を斜めにするだけで、躍動感が出て、デザインセンスがぐっと上がります。

覚えておくと便利なので、デモを作成しました。
斜めの背景帯＋帯の下に背景画像＋レスポンシブ対応になっています。
DEMO

HTML

<div class="bg_1">
    <div class="contents">
        <div class="contents_inner">
          <!--帯の中のコンテンツ-->
        </div>
    </div>
</div>

CSS

.bg_1 {
  width: 100%;
  height: 400px;
  background-image: url(画像URL);
  background-size: cover;
  background-position: center;
  padding: 35% 0 0 0;
}
.contents {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
  z-index: 2;
}
.contents:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 120%;
  height: 70%;
  margin: 3% -10% 0;
  background: #245037;
  -webkit-transform-origin: left center;
  -ms-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(3deg);
  -ms-transform: rotate(3deg);
  transform: rotate(3deg);
  z-index: -1;
}
.contents_inner {
  box-sizing: boder-box;
  width: 100%;
  max-width: 640px;
  height: 100%;
  margin: 0 auto;
  padding: 100px 10px 120px;
  color: #fff;
  text-align: center;
}

.bg_1に帯の下に敷く背景画像を入れてください。
.bg_1のheight値は画像によって変えてください。（帯の間からの画像の見え方が変わります）

rotate(3deg)の数値を変更することによって斜めの角度が変わります。
例えばrotate(-3deg)にすると逆の傾斜になります。
marginやpaddingは文字サイズや文字量によって調節してください。

デモページでは左に傾斜＋右に傾斜＋2つの帯を重ねるという3パターンの記述をしています。
DEMO

こちらの記事を参考にさせていただきました。
CSSのみで背景を全体的に斜めにして傾斜をつける方法 | UNORTHODOX WORKBOOK | Blog