CSSで背景画像をカスタマイズする方法：位置・サイズ・グラデーションの指定法

Webページやアプリケーションの見た目を改善するために、CSSを使って背景画像をカスタマイズすることができます。

この記事では、背景画像の位置やサイズ、グラデーションの指定法について解説します。デザイン性を高めるためのポイントを押さえて、より魅力的なWebページやアプリケーションを作り上げましょう。

CSSで背景画像をカスタマイズする方法ってどんなものがあるの？

背景画像の位置やサイズ、グラデーションの指定法があります。位置を指定する方法としては、background-positionプロパティを使います。サイズを指定する方法としては、background-sizeプロパティを使います。グラデーションを表示する方法としては、linear-gradient()関数を使います。

背景色の設定する方法

最も基本的な背景の設定方法は、背景色の指定です。以下のように、background-colorプロパティを使用して設定することができます。

body {
  background-color: #ffffff;
}

この例では、body要素の背景色を白に設定しています。ここで使用している値は、16進数表記の色コードです。このように、CSSではRGB値や色名、16進数表記の色コードを使用して色を指定することができます。

背景画像の設定する方法

背景画像を設定するには、background-imageプロパティを使用します。以下は、背景に画像を設定する例です。

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

この例では、body要素の背景に”background-image.jpg”という画像ファイルを設定しています。background-imageプロパティでは、url()関数を使用して画像ファイルのパスを指定します。

背景の繰り返し設定する方法

背景画像を繰り返し表示する場合は、background-repeatプロパティを使用します。以下は、背景画像を横方向に繰り返し表示する例です。

body {
  background-image: url("background-image.jpg");
  background-repeat: repeat-x;
}

この例では、background-repeatプロパティにrepeat-xを指定しています。この値を指定することで、背景画像が横方向に繰り返し表示されます。他にも、repeat-yやno-repeatといった値を指定することができます。

背景の位置設定する方法

背景画像の表示位置を指定するには、background-positionプロパティを使用します。以下は、背景画像を右下に表示する例です。

body {
  background-image: url("background-image.jpg");
  background-position: right bottom;
}

この例では、background-positionプロパティにright bottomを指定しています。この値を指定することで、背景画像が右下に表示されます。他にも、left topやcenter centerといった値を指定することができます。

スクロール時の背景画像を固定表示する方法

スクロール時に背景画像を固定表示することで、Webページやアプリケーションの見た目を改善することができます。このような効果を実現するには、CSSで以下のように設定します。

body {
  background-image: url("background-image.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

上記の例では、背景画像を中央に表示し、スクロール時にも画像が固定されるように設定しています。background-attachmentプロパティにfixedを指定することで、背景画像が固定表示されます。

また、背景画像のサイズも、background-sizeプロパティでcoverを指定することで、コンテナ要素に合わせて拡大・縮小されるように設定しています。

背景画像の縦・横位置を指定する方法

CSSを使って背景画像の縦・横位置を指定することができます。ここでは、その方法について解説します。

背景画像の横位置を指定する

背景画像の横位置を指定するには、background-positionプロパティを使用します。以下は、背景画像を中央に表示する例です。

body {
  background-image: url("background-image.jpg");
  background-position: center;
}

この例では、background-positionプロパティにcenterを指定しています。この値を指定することで、背景画像が横方向に中央に表示されます。他にも、leftやrightといった値を指定することができます。

また、値として%やpxなどの単位を指定することもできます。以下は、背景画像を右側から20pxの位置に表示する例です。

body {
  background-image: url("background-image.jpg");
  background-position: right 20px;
}

この例では、background-positionプロパティにright 20pxを指定しています。この値を指定することで、背景画像が右側から20pxの位置に表示されます。

背景画像の縦位置を指定する

背景画像の縦位置を指定するには、background-positionプロパティに縦方向の値を追加します。以下は、背景画像を上部に表示する例です。

body {
  background-image: url("background-image.jpg");
  background-position: top;
}

この例では、background-positionプロパティにtopを指定しています。この値を指定することで、背景画像が縦方向に上部に表示されます。他にも、bottomやcenterといった値を指定することができます。

また、横位置と同様に、値として%やpxなどの単位を指定することもできます。以下は、背景画像を下部から20pxの位置に表示する例です。

body {
  background-image: url("background-image.jpg");
  background-position: bottom 20px;
}

この例では、background-positionプロパティにbottom 20pxを指定しています。この値を指定することで、背景画像が下部から20pxの位置に表示されます。

背景画像が表示されるエリアを指定する方法

CSSを使って、背景画像が表示されるエリアを指定することができます。ここでは、その方法について解説します。

背景画像が表示されるエリアを指定する

背景画像が表示されるエリアを指定するには、background-sizeプロパティを使用します。以下は、背景画像がコンテナ要素全体に表示される例です。

body {
  background-image: url("background-image.jpg");
  background-size: cover;
}

この例では、background-sizeプロパティにcoverを指定しています。この値を指定することで、背景画像がコンテナ要素全体に表示されるように拡大・縮小されます。

他にも、値としてcontainを指定することで、背景画像がコンテナ要素に収まるように縮小されます。

body {
  background-image: url("background-image.jpg");
  background-size: contain;
}

また、値としてpxや%などの単位を指定することもできます。以下は、背景画像の幅を500px、高さを300pxに指定する例です。

body {
  background-image: url("background-image.jpg");
  background-size: 500px 300px;
}

この例では、background-sizeプロパティに500px 300pxを指定しています。この値を指定することで、背景画像が幅500px、高さ300pxのエリアに表示されます。

背景画像の位置とサイズを同時に指定する

背景画像の位置とサイズを同時に指定するには、backgroundプロパティを使用します。以下は、背景画像を中央に表示し、コンテナ要素全体に拡大・縮小する例です。

body {
  background: url("background-image.jpg") center / cover no-repeat;
}

この例では、backgroundプロパティにurl、background-position、background-size、background-repeatを同時に指定しています。このように、backgroundプロパティを使用することで、背景画像の位置とサイズを簡単に指定することができます。

背景画像が表示される基準位置を指定する方法

CSSを使って、背景画像が表示される基準位置を指定することができます。ここでは、その方法について解説します。

背景画像が表示される基準位置を指定する

背景画像が表示される基準位置を指定するには、background-originプロパティを使用します。以下は、背景画像をborder-boxの左上に表示する例です。

body {
  background-image: url("background-image.jpg");
  background-origin: border-box;
  background-position: left top;
}

この例では、background-originプロパティにborder-boxを指定しています。これは、背景画像が表示される基準位置をborder-box（境界ボックス）に指定することを意味します。

他にも、padding-boxやcontent-boxといった値を指定することができます。padding-boxを指定することで、padding領域の左上に背景画像を表示することができます。content-boxを指定することで、コンテンツ領域の左上に背景画像を表示することができます。

body {
  background-image: url("background-image.jpg");
  background-origin: padding-box;
  background-position: left top;
}

body {
  background-image: url("background-image.jpg");
  background-origin: content-box;
  background-position: left top;
}

背景画像の表示範囲を指定する

また、背景画像の表示範囲を指定するには、background-clipプロパティを使用します。以下は、背景画像をpadding-boxの範囲内に表示する例です。

body {
  background-image: url("background-image.jpg");
  background-origin: padding-box;
  background-clip: padding-box;
}

この例では、background-clipプロパティにpadding-boxを指定しています。これは、背景画像の表示範囲をpadding領域に限定することを意味します。他にも、border-boxやcontent-boxといった値を指定することができます。

背景画像の表示サイズを指定する方法

CSSを使って、背景画像の表示サイズを指定することができます。ここでは、その方法について解説します。

背景画像の表示サイズを指定する

背景画像の表示サイズを指定するには、background-sizeプロパティを使用します。以下は、背景画像を幅100px、高さ200pxに指定する例です。

body {
  background-image: url("background-image.jpg");
  background-size: 100px 200px;
}

この例では、background-sizeプロパティに100px 200pxを指定しています。この値を指定することで、背景画像が幅100px、高さ200pxに表示されます。

他にも、値としてcoverやcontainを指定することができます。coverを指定することで、背景画像がコンテナ要素全体に表示されるように拡大・縮小されます。containを指定することで、背景画像がコンテナ要素に収まるように縮小されます。

body {
  background-image: url("background-image.jpg");
  background-size: cover;
}

body {
  background-image: url("background-image.jpg");
  background-size: contain;
}

また、background-sizeプロパティに%などの単位を指定することもできます。以下は、背景画像を幅50%、高さ100%に指定する例です。

body {
  background-image: url("background-image.jpg");
  background-size: 50% 100%;
}

この例では、background-sizeプロパティに50% 100%を指定しています。この値を指定することで、背景画像が幅50%、高さ100%に表示されます。

背景画像の位置とサイズを同時に指定する

背景画像の位置とサイズを同時に指定するには、backgroundプロパティを使用します。以下は、背景画像を中央に表示し、幅100px、高さ200pxに指定する例です。

body {
  background: url("background-image.jpg") center / 100px 200px no-repeat;
}

この例では、backgroundプロパティにurl、background-position、background-size、background-repeatを同時に指定しています。このように、backgroundプロパティを使用することで、背景画像の位置とサイズを簡単に指定することができます。

背景画像スタイルを一括指定する方法

CSSを使って、背景画像のスタイルを一括指定することができます。ここでは、その方法について解説します。

背景画像スタイルを一括指定する

背景画像スタイルを一括指定するには、backgroundプロパティを使用します。以下は、背景画像を中央に表示し、幅100px、高さ200pxに指定し、繰り返し表示しない例です。

body {
  background: url("background-image.jpg") center / 100px 200px no-repeat;
}

この例では、backgroundプロパティにurl、background-position、background-size、background-repeatを指定しています。このように、backgroundプロパティを使用することで、背景画像の位置、サイズ、繰り返し表示の有無を一括で指定することができます。

他にも、背景画像の基準位置や表示範囲なども同時に指定することができます。以下は、背景画像をコンテナ要素全体に表示し、padding領域内に限定する例です。

body {
  background: url("background-image.jpg") center / cover no-repeat padding-box;
}

この例では、backgroundプロパティにurl、background-position、background-size、background-repeat、background-origin、background-clipを指定しています。このように、backgroundプロパティを使用することで、背景画像のすべてのスタイルを一括で指定することができます。

複数の背景画像を指定する

また、backgroundプロパティを使用することで、複数の背景画像を指定することもできます。以下は、2つの背景画像を交互に表示する例です。

body {
  background: url("background-image1.jpg") center / cover no-repeat,
              url("background-image2.jpg") center / cover no-repeat;
}

この例では、backgroundプロパティに2つのurl、background-position、background-size、background-repeatを指定しています。このように、カンマで区切って複数の背景画像を指定することができます。指定した順番に背景画像が重なって表示されます。

直線的なグラデーションを表示する方法

CSSを使って、直線的なグラデーションを表示することができます。ここでは、その方法について解説します。

直線的なグラデーションを表示する

直線的なグラデーションを表示するには、linear-gradient()関数を使用します。以下は、上から下に向かって黄色から赤にかけてグラデーションを表示する例です。

background-image: linear-gradient(yellow, red);

この例では、background-imageプロパティにlinear-gradient(yellow, red)を指定しています。このように、linear-gradient()関数に始点の色と終点の色を指定することで、直線的なグラデーションを表示することができます。

また、始点と終点の位置を指定することもできます。以下は、左から右に向かって黄色から赤にかけてグラデーションを表示する例です。

background-image: linear-gradient(to right, yellow, red);

この例では、linear-gradient()関数にto rightを指定しています。このように、方向を指定することで、グラデーションの方向を変えることができます。

他にも、color-stopを使用することで、グラデーションの中間地点の色を指定することもできます。以下は、上から下に向かって黄色、赤、青にかけてグラデーションを表示する例です。

background-image: linear-gradient(yellow, red, blue);

この例では、linear-gradient()関数に黄色、赤、青の順番で色を指定しています。このように、複数の色を指定することで、グラデーションを自由にカスタマイズすることができます。

グラデーションの種類

linear-gradient()関数を使って、以下のような種類のグラデーションを表示することができます。

• 直線的なグラデーション: linear-gradient()
• 放射状のグラデーション: radial-gradient()
• 円錐状のグラデーション: conic-gradient()

それぞれの種類において、始点・終点の色や位置を指定することができます。

以上のように、CSSを使って直線的なグラデーションを表示することができます。適切な色や方向を指定して、Webページやアプリケーションの見た目を改善しましょう。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

背景画像の位置やサイズ、グラデーションの指定法について解説しました。

背景画像のカスタマイズはWebページやアプリケーションの見た目を改善する上で大切なポイントですね。

適切な背景画像の設定によって、Webページやアプリケーションの印象を大きく変えることができます。デザイン性を高めるために、ぜひ背景画像のカスタマイズに挑戦してみましょう。

また、背景画像に対して適切なコントラストを保つことも重要です。見やすさや使いやすさを意識して、ユーザーが快適に利用できるWebページやアプリケーションを作り上げていきましょう。