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

CSSで背景画像の表示位置を指定する方法（background-originプロパティ）

CSSの background-origin プロパティは、背景画像を配置するときの基準となる領域（ポジショニングエリア）を指定するために使用します。このプロパティを活用することで、背景画像をボーダー・パディング・コンテンツのどの領域を基準に表示するかを細かく制御できます。

background-originで指定できる主な値

  • border-box：ボーダーボックス（枠線の外側）を基準に背景画像を配置します。初期値はこちらです。
  • padding-box：パディングボックス（内側の余白領域）を基準に背景画像を配置します。
  • content-box：コンテンツボックス（テキストなどの実際の内容領域）を基準に背景画像を配置します。

実装例

以下のコードでは、background-origin: content-box; を指定して、コンテンツ領域を基準に背景画像を表示しています。

<html>

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

   <body>
      <div id="demo">
         <h1>www.tutorialspoint.com</h1>
         <p>The website www.tutorialspoint.com is owned and maintained by Tutorials Point India Private Limited, henceforth termed as “we”, “our”, “us”, or the “company".
            All the visitors, users, learners, contributors, teachers, and instructors are named as "users"; and the website tutorialspoint.com is termed as "website" everywhere in this document.
            We are committed to protecting your privacy online. This privacy policy explains what information we collect from you or what information you share with us when you visit the website.
            We review our policy from time to time, so you are advised to check the latest version.</p>
      </div>
   </body>

</html>

コードのポイント

このサンプルでは、対象の要素に対して赤色の破線ボーダー（5px）と10pxのパディングを設定しています。background-origin: content-box; を指定しているため、背景画像はコンテンツ領域の左上を起点として描画されます。

値を border-box や padding-box に変更してブラウザで確認すると、背景画像の開始位置がどのように変化するかを視覚的に理解できます。レイアウトやデザインの意図に応じて、適切な値を選択しましょう。

  1. CSSで背景に放射状グラデーション（radial-gradient）を設定する方法

    CSSのradial-gradient()関数を使用すると、中心点から外側に向かって色が変化する放射状グラデーションを、背景画像として簡単に設定できます。複数の色を指定するだけで、滑らかなグラデーションが自動的に生成されるため、ボタンやバナー、セクション背景などのデザインに幅広く活用できます。radial-gradient()の基本構文background: radial-gradient(色1, 色2, 色3, ...);色はカンマ区切りで複数指定でき、左側に記述した色が中心になり、右側の色が外周へと変化していきます。実装例次のコードでは、緑（green）・オレンジ（orange）・栗色（m

  2. CSSを使ってスクロール時に背景画像を切り替える方法【サンプルコード付き】

    CSSを使用すれば、JavaScriptに頼らなくても、ページをスクロールした際に背景画像を切り替える演出を実現できます。仕組みはシンプルで、複数のセクション（div要素）ごとに異なる背景画像を設定し、テキストをposition: fixedで画面に固定表示するだけです。スクロールに合わせて背景が次々と変化していき、パララックス風の印象的なデザインになります。 実装のポイント 各div要素に対してbackground-imageで異なる画像URLを指定します。 background-size: cover; と background-position: center; を組み合わせることで、