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

CSSで背景画像を指定する方法

CSSの background-image プロパティを使うと、要素の背景に画像を指定できます。URLで画像ファイルの場所を指定するだけで、簡単に背景画像を設定することが可能です。

以下のコードは、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>

コードのポイント

  • background-image：背景に表示したい画像を url() の中に指定します。相対パス・絶対パスのどちらでも使用できます。
  • border：この例では赤色の破線ボーダー（5px）を設定し、要素の範囲がわかりやすくなっています。
  • padding：内側の余白を10px確保することで、テキストと背景画像のバランスを調整しています。

なお、デフォルトでは背景画像はタイル状に繰り返し表示されます。繰り返しを制御したい場合は background-repeat プロパティ、表示サイズを調整したい場合は background-size プロパティと組み合わせて使うと便利です。

  1. CSSのbackground-imageプロパティで背景画像を設定する方法

    CSSのbackground-imageプロパティは、選択した要素の背景に画像を設定するために使用されます。単一の画像だけでなく、複数の画像をカンマで区切って指定することも可能で、グラデーションを背景として利用することもできます。基本構文CSSのbackground-imageプロパティの構文は以下の通りです。セレクタ { background-image: /*値*/ }値には、url()関数で画像のパスを指定するか、linear-gradient()などのグラデーション関数を指定します。以下の例では、CSSのbackground-imageプロパティの使い方を紹介します。例1: 要

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

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