背景画像と背景色を同時に！WebデザインをワンランクアップさせるCSSテクニック

2024-07-02

CSSで背景画像と背景色を同時に設定する方法

基本的な手順

背景画像を設定する

background-image: url(画像のパス);

background-color: 色;

上記のコードを組み合わせると、背景画像の上に背景色が表示されます。

詳細

background-image プロパティは、要素に表示する画像ファイルを指定します。
背景画像と背景色は、レイヤー構造になっています。背景画像は下側に、背景色は上側に表示されます。
background プロパティには、他にも様々なオプションがあります。例えば、画像の繰り返し方法や配置場所などを設定することができます。

例

body {
  background-image: url(background.jpg);
  background-color: #f0f0f0;
}

この例では、body 要素に background.jpg 画像と、薄灰色の背景色を設定します。

応用例

ヘッダーやフッターに背景画像と背景色を設定して、デザインを統一する。
コンテンツ領域にテクスチャ画像と背景色を設定して、読みやすさを向上させる。
ボタンやその他のインタラクティブ要素に背景画像と背景色を設定して、視覚的に目立たせる。

CSSの background プロパティは、様々なバリエーションがあります。詳細は、MDN Web Docsなどのリファレンス資料を参照してください。
背景画像と背景色の組み合わせは、Webデザイン全体の印象を左右します。慎重に色と画像を選択してください。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>CSS: 背景画像と背景色</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>CSSで背景画像と背景色を設定</h1>
    <p>この要素には、背景画像と背景色が設定されています。</p>
  </div>
</body>
</html>

CSS

.container {
  background-image: url("background.jpg");
  background-color: #f0f0f0;
  padding: 20px;
  text-align: center;
}

説明

このコードは、index.html と style.css という2つのファイルで構成されています。
index.html ファイルは、HTMLの構造を定義します。この例では、container というクラスを持つ div 要素が定義されています。
style.css ファイルは、CSSのルールを定義します。この例では、.container クラスに background-image と background-color プロパティを設定しています。
background-image プロパティは、background.jpg 画像を container 要素の背景に設定します。
background-color プロパティは、#f0f0f0 という薄灰色の背景色を container 要素に設定します。

実行結果

このコードを実行すると、container 要素には background.jpg 画像と薄灰色の背景色が表示されます。

カスタマイズ

このサンプルコードは、自由にカスタマイズすることができます。例えば、以下のように変更できます。

別の画像ファイルを使用する
別の背景色を使用する
背景画像の繰り返し方法を変更する

詳しくは、CSSの background プロパティに関するドキュメントを参照してください。

CSSで背景画像と背景色を同時に設定するその他の方法

グラデーションと背景画像の重ね合わせ

CSSの linear-gradient や radial-gradient などのグラデーション機能を使用して、背景色を作成し、その上に背景画像を重ねることができます。この方法は、より複雑で洗練されたデザインを作成するのに役立ちます。

body {
  background: linear-gradient(to right, #f0f0f0, #ccc) url("background.jpg");
}

この例では、水平方向のグラデーション (白からグレー) を作成し、その上に background.jpg 画像を重ねています。

SVG画像を使用して、背景色と模様を定義することができます。SVGはベクターグラフィック形式なので、サイズ変更しても画質が劣化しません。

body {
  background-image: url("background.svg");
}

この例では、background.svg というSVG画像を背景に設定しています。

background-attachment プロパティを使用して、背景画像をスクロールに固定したり、ページと共にスクロールさせたりすることができます。

body {
  background-image: url("background.jpg");
  background-attachment: fixed;
}

疑似要素の使用

CSSの疑似要素を使用して、背景画像と背景色を別々に設定することができます。この方法は、より柔軟なデザインを作成するのに役立ちます。

body::before {
  content: "";
  background-image: url("background.jpg");
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

body {
  background-color: #f0f0f0;
}