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

CSSのbackground-imageプロパティとは？背景画像の設定方法をわかりやすく解説

CSSのbackground-imageプロパティは、要素の背景に画像を表示するために使用されます。単一の色（background-color）だけでは表現できないリッチなデザインを実現するため、Webサイト制作において非常によく使われるプロパティの一つです。

background-imageの基本構文

background-image: url("画像のURL");

url()関数の中に、表示したい画像ファイルのパスまたはURLを指定します。相対パスでも絶対URLでも指定可能です。

実装例

以下のコードは、div要素に対してbackground-imageプロパティを使って背景画像を設定する例です。実際にコードを書いて動作を確認してみましょう。

<html>
   <head>

      <style>
         #demo {
            border: 5px dashed red;
            padding: 10px;
            background-image: url("https://www.tutorialspoint.com/css/images/css-mini-logo.jpg");
         }
      </style>

   </head>
   <body>

      <div id = "demo">
         <h1>www.tutorialspoint.com</h1>
         <p>Tutorials Point originated from the idea that there exists a class of readers who respond better to online content and prefer to learn new skills at
               their own pace from the comforts of their drawing rooms. The journey commenced with a single tutorial on HTML in 2006 and elated by the response it generated,
               we worked our way to adding fresh tutorials to our repository which now proudly flaunts a wealth of tutorials and allied articles on
               topics ranging from programming languages to web designing to academics and much more..
         </p>
      </div>

   </body>
</html>

コードの解説

  • border: 5px dashed red; … 要素の周囲に赤色の破線ボーダーを引きます。
  • padding: 10px; … 要素の内側に余白を設けます。
  • background-image: url(...); … 指定した画像URLを要素の背景として表示します。

このコードを実行すると、idが「demo」のdiv要素全体に指定した画像が背景として敷き詰められます。デフォルトでは画像は縦横に繰り返し（タイル状）表示される点に注意してください。

覚えておくと便利な関連プロパティ

background-imageと組み合わせて使うことで、より細かく背景を制御できます。

  • background-repeat: 画像の繰り返し方法を指定します（repeat / no-repeat / repeat-x / repeat-y）。
  • background-size: 背景画像のサイズを指定します。coverやcontainを使うとレスポンシブ対応に便利です。
  • background-position: 背景画像の表示位置を調整できます。
  • background-color: 画像が読み込まれない場合の代替色として設定しておくと安心です。

これらをまとめて指定できるショートハンドのbackgroundプロパティも活用すれば、コードをより簡潔に記述できます。

  1. 【CSS】font-size-adjustプロパティの使い方｜フォールバック時の可読性を維持する方法

    CSSのfont-size-adjustプロパティは、フォントフォールバック（指定したフォントが利用できない環境で代替フォントへ切り替わること）が発生した際にも、テキストの可読性を維持するために使用されます。本記事では、その基本的な仕組みと実装例をコード付きで解説します。 font-size-adjustプロパティとは Webページで指定したフォントがユーザーの端末にインストールされていない場合、ブラウザは自動的に代替フォントで表示します。しかし、フォントごとに文字の大きさやx-height（小文字「x」の高さ）の比率が異なるため、同じfont-sizeを指定していても、実際に表示される文字

  2. CSSのwhite-spaceプロパティとは？要素内の空白・改行の扱い方を徹底解説

    CSSのwhite-spaceプロパティを使うと、HTML要素内の半角スペース、タブ、改行などの空白文字をどのように表示するかを細かく制御できます。デフォルトでは連続する空白は1つにまとめられますが、このプロパティを指定することで、ソースコード上の空白や改行をそのまま反映させたり、逆に折り返しを禁止したりすることが可能です。 white-spaceプロパティの基本例 以下は、normalとpreという2つの値を使って、空白の扱いの違いを比較するサンプルコードです。 <!DOCTYPE html> <html> <head> <style>