【CSS】background-origin - 背景画像の起点位置

CSSのbackground-originプロパティについて解説します。

検証環境

CSS

macOS

14.1

background-origin

background-originは“背景画像の相対位置”のプロパティです。

基本構文

background-origin: 値;

値

代表的な値は次の通りです。

値	意味
border-box	境界ボックスとの相対位置
padding-box	パディングボックスとの相対位置
content-box	コンテンツボックスとの相対位置

サンプル

border-box

sample.html

<style>
p {
    padding: 30px;
    border: 20px dashed silver;
    background-color: lightgray;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-origin/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    ___ih_hl_start
    background-origin: border-box;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets.
    CSS is a programming language
    that decorates elements such as HTML and XML.
    You can set various properties
    such as text color, background, and size.
</p>

プレビュー

padding-box

sample.html

<style>
p {
    padding: 30px;
    border: 20px dashed silver;
    background-color: lightgray;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-origin/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    ___ih_hl_start
    background-origin: padding-box;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets.
    CSS is a programming language
    that decorates elements such as HTML and XML.
    You can set various properties
    such as text color, background, and size.
</p>

プレビュー

content-box

sample.html

<style>
p {
    padding: 30px;
    border: 20px dashed silver;
    background-color: lightgray;
    background-image: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background-origin/hacker-commandline.jpeg');
    background-repeat: no-repeat;
    ___ih_hl_start
    background-origin: content-box;
    ___ih_hl_end
}
</style>

<p>
    CSS : Cascading Style Sheets.
    CSS is a programming language
    that decorates elements such as HTML and XML.
    You can set various properties
    such as text color, background, and size.
</p>

プレビュー