【CSS】background-origin - 背景画像の表示開始位置

CSSのbackground-originプロパティについてご紹介します。

background-origin

background-originは背景画像の表示開始位置を示すプロパティです。

基本構文

background-origin: 値;

値

一般的な値は次の通りです。

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

サンプル

border-box

サンプル

<style>
div {
    font-size: 36px;
    border: 10px dashed black;
    padding: 30px;
    background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
    background-repeat: no-repeat;
    background-origin: border-box;
}
</style>

<div>TEXT</div>

プレビュー

padding-box

サンプル

<style>
div {
    font-size: 36px;
    border: 10px dashed black;
    padding: 30px;
    background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
    background-repeat: no-repeat;
    background-origin: padding-box;
}
</style>

<div>TEXT</div>

プレビュー

content-box

サンプル

<style>
div {
    font-size: 36px;
    border: 10px dashed black;
    padding: 30px;
    background-image: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
    background-repeat: no-repeat;
    background-origin: content-box;
}
</style>

<div>TEXT</div>

プレビュー