Written by Kasumi

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で背景の半分だけ単色もしくは画像を指定する方法について紹介しました。

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

目次

関連記事

HTMLCSS プログラミング

【簡単】htmlでpdfファイルを表示・ダウンロードする方法【表示されない場合の解決方法も伝授】

2022.03.23
17506
HTMLCSS プログラミング

【簡単CSS】videoタグを使って動画を背景に設定する方法

2022.03.12
13011
HTMLCSS プログラミング

CSSだけでhover(ホバー)したら画像を拡大させる方法【jQuery不要】

2022.01.03
2244
HTMLCSS

【簡単CSS】複数の背景画像にパララックスを実装する方法【スマホ対応】

更新日:2022.12.31
17417