CSSで奥行きのあるデザインを実現！複数の背景画像と高度なテクニック

複数の背景画像を追加する方法は 2 通りあります。

background プロパティを複数回使用する

element {
  background-image: url(image1.png), url(image2.png);
  background-repeat: no-repeat, repeat;
  background-position: center, top left;
}

この例では、image1.png が image2.png の上に表示されます。background-repeat プロパティは、それぞれ no-repeat と repeat に設定されているため、image1.png は一度だけ表示され、image2.png は横に繰り返されます。background-position プロパティは、それぞれの画像の位置を指定します。

background-image プロパティにカンマ区切りの値を指定する

element {
  background-image: url(image1.png), url(image2.png);
}

この方法は、上記の方法とほぼ同じですが、より簡潔に記述できます。

ファイルサイズが大きくなると、ページの読み込み速度が遅くなる可能性があります。
重なり合う画像が混雑して見にくくならないように注意する必要があります。
画像のサイズや配置を調整しないと、意図したデザインにならない場合があります。

background-color プロパティを使用して、背景色を指定できます。
background-repeat プロパティを使用して、背景画像の繰り返し方法を指定できます。
background-position プロパティを使用して、背景画像の位置を調整できます。
background-size プロパティを使用して、背景画像のサイズを調整できます。

異なる画像を並べて表示

.container {
  background-image: url("image1.jpg"), url("image2.jpg");
  background-repeat: no-repeat, repeat-x;
  background-position: left, right;
  background-size: auto, contain;
}

このコードでは、以下のことが行われます。

image1.jpg は元のサイズで表示され、image2.jpg は .container の幅に合わせてサイズ調整されます。
image1.jpg は左側に固定され、image2.jpg は右側に繰り返し表示されます。
image1.jpg と image2.jpg の 2 つの背景画像が並べて表示されます。

同じ画像を重ねて表示（透過処理あり）

.container {
  background-image: url("overlay.png"), url("background.jpg");
  background-repeat: repeat, no-repeat;
  background-position: center, center;
  background-size: auto, cover;
}

overlay.png は透過処理されているため、background.jpg が透けて見えます。
overlay.png は元のサイズで表示され、background.jpg は .container のサイズに合わせてサイズ調整されます。
overlay.png は .container 全体に繰り返し表示され、background.jpg は .container を覆うように表示されます。
overlay.png と background.jpg の 2 つの背景画像を重ねて表示されます。

.container {
  background-image: linear-gradient(to right, #f00, #0f0), url("pattern.png");
  background-repeat: repeat;
  background-position: center;
  background-size: auto;
}

pattern.png は元のサイズで表示されます。
pattern.png は .container 全体に繰り返し表示されます。
左から右へグラデーションで色が変化し、その上に pattern.png が表示されます。

これらの例はほんの一例であり、CSS で複数の背景画像を使用する方法は他にもたくさんあります。創造力を働かせて、様々なデザインを試してみてください。

ウォーターマークとして、ロゴを背景画像として使用する
テクスチャを追加するために、ランダムなパターンの画像を背景画像として使用する
影を付けるために、ぼやけた画像を背景画像として使用する

SVG を使用する

SVG (Scalable Vector Graphics) は、ベクターグラフィックの形式で、サイズを変更しても画質が劣化しないという利点があります。また、複数のパスやシェイプを組み合わせることで、複雑なデザインを作成することができます。

.container {
  background-image: url("pattern.svg");
  background-repeat: repeat;
}

この例では、pattern.svg という SVG ファイルを背景画像として使用しています。SVG ファイルは、テキストエディタで編集することができます。

CSS グラデーションを使用する

CSS グラデーションを使用して、滑らかな色の移り変わりを作成することができます。

.container {
  background-image: linear-gradient(to right, #f00, #0f0);
}

この例では、左から右へグラデーションで色が変化します。開始色と終了色を指定することで、様々なグラデーションを作成することができます。

CSS 疑似要素を使用する

CSS 疑似要素を使用して、要素の前にまたは後ろにコンテンツを配置することができます。

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

この例では、.container 要素の前に image.png という画像を配置します。疑似要素の位置やサイズを調整することで、様々なデザインを作成することができます。

背景画像を JavaScript で動的に変更する

JavaScript を使用して、ページの読み込み時またはユーザーの操作に応じて、背景画像を動的に変更することができます。

const container = document.querySelector(".container");

container.addEventListener("click", () => {
  const images = ["image1.jpg", "image2.jpg", "image3.jpg"];
  const randomImage = images[Math.floor(Math.random() * images.length)];
  container.style.backgroundImage = `url(${randomImage})`;
});

この例では、.container 要素がクリックされたときに、ランダムな画像が背景画像として設定されます。

CSSで奥行きのあるデザインを実現！ 複数の背景画像と高度なテクニック

異なる画像を並べて表示

同じ画像を重ねて表示（透過処理あり）

SVG を使用する

CSSで奥行きのあるデザインを実現！複数の背景画像と高度なテクニック