CSSで背景の半分だけ単色もしくは画像を指定する方法

CSSで背景の半分だけ単色もしくは画像を指定したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

実装例

See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0

実装サンプルです。

縦横方向に半分だけ単色・画像が背景表示されてます。

実装方法は以下の通りです。

背景の半分を単色にする

.bg {
  background: linear-gradient(180deg, transparent 0%, transparent 50%, blue 50%, blue 100%);
}

背景の半分を単色にするコード例です。

backgroundプロパティのlinear-gradient関数を使う事で実現できます。

使い方は以下の通りです。

background: linear-gradient(角度, transparent 0%, transparent 50%,カラーコード 50%, カラーコード 100%);

linear-gradientの引数に、背景色の角度（180degで横半分、90degで縦半分になります）、カラーコードを指定します。

以上で背景が半分指定したカラーコードになります。

背景の半分を画像にする

//背景の横半分画像
.bg01 span:first-child {
  display: block;
  height: 50%;
}

.bg01 span:last-child {
  display: block;
  width: 100%;
  height: 50%;
  background-image: url(https://kasumiblog.xsrv.jp/codepen/images/forest.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

//背景の縦半分画像
.bg02 {
  display: flex;
  justify-content: center;
  align-items: center;
}
.bg02 span:first-child {
  display: block;
  flex: 0 0 50%;
}
.bg02 span:last-child {
  display: block;
  width: 50%;
  height: 100%;
  flex: 0 0 50%;
  background-image: url(https://kasumiblog.xsrv.jp/codepen/images/forest.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

背景を半分画像にするコード例です。

背景を半分画像にする要素に子要素を二つ用意します。（本記事では例としてspanタグ二つ）

横半分を画像にするには、片方の子要素にbackgroundプロパティを指定。

同じく子要素にheight: 50%;、background-size: cover;を指定。

縦横比を維持したまま横半分背景画像指定できます。

縦半分画像にするには、親要素にdisplay: flex;を指定。

子要素を横並びにします。

子要素にそれぞれflex: 0 0 50%;を指定。

あとは横半分と同じく片方の子要素にbackgroundプロパティを指定。

width: 50%;、background-size: cover;を指定します。

以上で実装完了です。

まとめ

CSSで背景の半分だけ単色もしくは画像を指定する方法について紹介しました。

以上で解説を終わります。

CSSで背景の半分だけ単色もしくは画像を指定する方法

実装例

背景の半分を単色にする

背景の半分を画像にする

まとめ

関連記事