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

CSSで背景画像を水平・垂直方向の両方に繰り返す方法

CSSで背景画像を水平方向と垂直方向の両方に繰り返して表示するには、background-imageプロパティとbackground-repeatプロパティを使用します。背景画像は、ページ全体や特定の要素の背景としてタイル状に敷き詰めることができます。

background-repeatプロパティとは

background-repeatプロパティは、背景画像の繰り返し方法を制御します。初期値はrepeatであるため、明示的に指定しなくても背景画像は自動的に水平・垂直両方向に繰り返されます。ただし、コードの意図を明確にするために、あえて記述しておくことをおすすめします。

  • repeat … 水平方向と垂直方向の両方に繰り返します(デフォルト)
  • repeat-x … 水平方向のみ繰り返します
  • repeat-y … 垂直方向のみ繰り返します
  • no-repeat … 繰り返さず、1回だけ表示します

サンプルコード

以下のコードを実行すると、指定した画像がブラウザ画面全体に繰り返し表示されます。

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

まとめ

背景画像を全方向に繰り返したい場合は、background-imageで画像を指定し、background-repeat: repeat;を設定するだけで実現できます。パターン画像やテクスチャ素材を使えば、軽量ながら印象的なデザインの背景を簡単に作成できます。

  1. CSSでボタンを上下左右の中央に配置する方法【Flexbox活用】

    CSSでボタンを垂直方向・水平方向の中央に配置するには、Flexbox（フレックスボックス）を使うのが最も簡単で確実な方法です。親要素にdisplay: flex;を指定し、justify-content: center;で水平方向の中央揃え、align-items: center;で垂直方向の中央揃えを実現できます。 コード例 <!DOCTYPE html> <html> <head> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Ve

  2. CSSで要素を垂直方向・水平方向に中央揃えする方法

    CSSで要素を垂直方向と水平方向の両方に中央揃えしたい場合、最も簡単で推奨される方法はFlexbox（フレックスボックス）を使うことです。親要素に display: flex を設定し、justify-content: center と align-items: center を指定するだけで、子要素を中央に配置できます。 Flexboxを使った中央揃えの実装例 <!DOCTYPE html> <html> <head> <style> body { font-family: Segoe UI, Tahoma, Genev