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

CSSで背景画像を1回だけ表示する方法｜background-repeatプロパティの使い方

CSSで背景画像を繰り返さず、1回だけ表示したい場合は、background-repeatプロパティにno-repeatを指定します。デフォルトでは背景画像はタイル状に繰り返し表示されますが、no-repeatを設定することで画像が1度だけ描画され、残りの領域は背景色（または透明）になります。

background-repeat: no-repeat の基本構文

body {
  background-image: url("画像のURL");
  background-repeat: no-repeat;
}

実装例

以下のコードは、ページ全体の背景に画像を1回だけ表示するシンプルな例です。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-image: url("https://www.tutorialspoint.com/videotutorials/images/tutor_connect_home.jpg");
      background-repeat: no-repeat;
    }
  </style>
</head>
<body>
  <h1>Background Image</h1>
</body>
</html>

background-repeatで使える主な値

  • repeat（初期値）：画像を縦横に繰り返して表示します。
  • no-repeat：画像を1回だけ表示し、繰り返しを行いません。
  • repeat-x：水平方向のみ繰り返します。
  • repeat-y：垂直方向のみ繰り返します。

補足：表示位置やサイズも一緒に指定しよう

背景画像を1回だけ表示する場合、background-positionで位置を調整したり、background-size: cover;を使って画面いっぱいに拡大表示したりすると、より洗練されたデザインになります。

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

これらのプロパティは、短縮形のbackgroundプロパティでまとめて記述することも可能です。

  1. CSSのbackgroundショートハンド（一括指定）プロパティの使い方を解説

    CSSのbackgroundショートハンド（一括指定）プロパティは、要素の背景をまとめて定義するための便利なプロパティです。1つの宣言で複数の背景関連プロパティを同時に設定できるため、コードが簡潔になり、可読性も向上します。backgroundショートハンドに含まれる個別プロパティbackgroundショートハンドを使うことで、以下の8つの個別プロパティを一度に指定できます。background-color：背景色background-image：背景画像background-repeat：画像の繰り返し方法background-position：画像の表示位置background-clip：

  2. CSSで背景画像をぼかす方法｜filter: blur()の使い方を解説

    Webサイトのヒーローセクションなどで、背景画像をぼかして奥行きのあるおしゃれなデザインにしたい場面は多くあります。CSSではfilterプロパティのblur()関数を使うだけで、誰でも簡単にぼかし効果を実現できます。この記事では、実際のコード例とともにその実装方法を詳しく解説します。 実装のポイント：背景画像専用の要素を分ける blur()は指定した要素だけでなく、その中にある子要素（テキストなど）にも適用されてしまいます。そのため、背景画像だけをぼかしたい場合は、背景画像専用の要素を別途用意し、テキストなどのコンテンツとは分離して配置するのが重要なポイントです。 コード例 <!DOC