CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでページ全体の背景画像を設定する方法【サンプルコード付き】

CSSを使用すれば、Webページ全体に背景画像を簡単に表示できます。重要なのは background-size: cover を指定することです。これにより、画像が画面サイズに合わせて自動的に拡大・縮小され、領域全体を覆うようになります。

以下は、CSSでフルページの背景画像を作成するコード例です。

サンプルコード

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body, html {
   height: 100%;
   margin: 0;
}
.background {
   background-image: url("https://images.pexels.com/photos/1424246/pexels-photo-1424246.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=1000");
   height: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
}
</style>
</head>
<body>
<div class="background"></div>
</body>
</html>

出力結果

上記のコードを実行すると、次のような出力が得られます。

CSSでページ全体の背景画像を設定する方法【サンプルコード付き】

使用している主なプロパティの解説

  • height: 100% … html要素とbody要素の高さを画面いっぱいに設定し、背景画像が全画面に広がるようにします。
  • margin: 0 … ブラウザのデフォルトマージンを削除し、余白なく画像を表示します。
  • background-position: center … 背景画像を領域の中央に配置します。
  • background-repeat: no-repeat … 画像の繰り返し表示を防止します。
  • background-size: cover … アスペクト比を維持したまま、領域全体を覆うように画像を拡大・縮小します。
  1. CSSを使ってクーポンを作成する方法【サンプルコード付き】

    CSSを活用すれば、破線の枠やプロモーションコード、有効期限などを含んだ見栄えの良いクーポンデザインを、HTMLとCSSだけで簡単に作成できます。本記事では、実際に動作するサンプルコードを交えて、クーポンの実装方法をわかりやすく解説します。 クーポン作成のサンプルコード 以下のコードは、店舗名・商品画像・キャッチコピー・割引コード・有効期限を含むクーポンを作成するものです。破線のボーダー（dashed）を使うことで、切り取り線のある本物のクーポンらしい雰囲気を演出しています。 <!DOCTYPE html> <html> <head> <meta na

  2. CSSでスクロールに連動して変化するグラデーション背景を実装する方法

    Webページをスクロールしたときに、背景のグラデーションが自然に変化していく演出は、サイトに動きと深みを与えてくれる効果的なテクニックです。CSSだけでこの効果を実現するには、linear-gradient()を使ったグラデーション背景と、十分な高さを持つbody要素を組み合わせます。 仕組みのポイント この手法の鍵となるのは、以下の2点です。 bodyの高さを250vhなど画面より大きく設定する: ページ全体が長くなることでスクロールが発生します。グラデーションはbody全体に描画されるため、スクロールに応じて見えている部分が変化し、まるでグラデーションが「動いている」ように見えます。 l