CSSのbackground-originで背景画像の基準位置を設定し、デザインを調整する方法をわかりやすく解説

2024.09.14
スポンサーリンク

background-originプロパティは、背景画像の描画が開始される位置を指定します。背景画像がボーダーから描かれるのか、パディング内から描かれるのか、コンテンツの内側から描かれるのかを制御します。このプロパティを使用することで、要素の内部構造に応じて背景画像の位置を細かく調整することが可能です。

スポンサーリンク

background-originプロパティの値とその効果

  • border-box: 背景はボーダーの外側から描画されます。
  • padding-box: 背景はパディングの内側から描画されます（デフォルト値）。
  • content-box: 背景はコンテンツの内側から描画されます。

注意点と関連情報

background-originプロパティは、背景画像の開始位置を制御する重要なプロパティです。ボーダーやパディングの影響を受ける要素では、このプロパティによって背景の表示範囲を調整できます。デフォルトはpadding-boxですが、ボーダーの内側やコンテンツボックスに限定した背景表示を実現する場合には、border-boxやcontent-boxを使用します。

background-originプロパティが効かない時の原因と対策

背景画像や背景色の指定がない

background-originは、背景画像や背景色の位置を決定するためのプロパティですが、背景画像や背景色が指定されていない場合、このプロパティの効果は確認できません。
対策: background-imageやbackground-colorを指定して、background-originプロパティの効果が適用される状態にしましょう。

他の背景プロパティとの競合

background-positionやbackground-sizeなどの他の背景プロパティがbackground-originと競合している場合、期待した結果が得られないことがあります。特に、背景画像の位置やサイズが他のプロパティによって制御されると、background-originの効果が不明瞭になることがあります。
対策: 競合する可能性のあるプロパティを確認し、background-originの効果が反映されるように適切に調整しましょう。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 50px auto;
        border: 10px solid #000;
        text-align: center;
        font-size: 18px;
        color: #333;
        box-sizing: border-box;
        background-image: url('画像アドレス');
        background-size: cover;
        background-repeat: no-repeat;
        height: 300px;
    }

background-origin: border-box

background-origin: border-boxは、背景画像がボーダーの外側から描画されます。背景画像がボーダーに含まれる要素で使用されることが多い設定です。

HTMLコード

<div class="css-sample-container css-sample-origin-border-box">
    背景はボーダーの外側から描画されます。
    </div>

CSSコード

.css-sample-origin-border-box {
    background-origin: border-box;
}

表示結果

背景はボーダーの外側から描画されます。

background-origin: padding-box

background-origin: padding-boxは、背景画像がパディングの内側から描画されます。これはデフォルトの動作です。

HTMLコード

<div class="css-sample-container css-sample-origin-padding-box">
    背景はパディングの内側から描画されます。
    </div>

CSSコード

.css-sample-origin-padding-box {
    background-origin: padding-box;
}

表示結果

背景はパディングの内側から描画されます。

background-origin: content-box

background-origin: content-boxは、背景画像がコンテンツの内側から描画されます。背景画像をコンテンツに限定したい場合に使います。

HTMLコード

<div class="css-sample-container css-sample-origin-content-box">
    背景はコンテンツの内側から描画されます。
    </div>

CSSコード

.css-sample-origin-content-box {
    background-origin: content-box;
}

表示結果

背景はコンテンツの内側から描画されます。

まとめ

background-originプロパティは、背景画像の描画開始位置を制御するために使用されます。border-box、padding-box、content-boxの3つのオプションから選択でき、背景画像がどの範囲から描かれるかを調整できます。要素のレイアウトに応じて、適切な値を選択することが重要です。

スポンサーリンク