【CSS】background - 背景

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

検証環境

CSS

macOS

14.1

background

backgroundは“背景”のプロパティです。

背景に関する項目を一括設定します。

各項目の個別設定は個別プロパティを使用します。

【CSS】background-color - 背景色

【CSS】background-image - 背景画像

【CSS】background-repeat - 背景画像のリピート

【CSS】background-size - 背景画像のサイズ

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

【CSS】background-clip - 背景画像の表示範囲

【CSS】background-position - 背景画像の位置

【CSS】background-attachment - 背景画像のスクロール位置

基本構文

background: 色 画像 位置（X座標） 位置（Y座標）/ サイズ リピート スクロール位置 表示範囲;

色または画像のどちらか１つは必ず設定します。

サンプル

背景：色

sample.html

<style>
div {
    width: 100px;
    height: 100px;
    ___ih_hl_start
    background: red;
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

背景：画像（必須値のみ）

sample.html

<style>
div {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    ___ih_hl_start
    background: url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background/hacker-commandline.jpeg');
    ___ih_hl_end
}
</style>

<div></div>

プレビュー

背景画像２

サンプル

<style>
div {
    width: 300px;
    height: 300px;
    border: 1px solid black;
    background: lightgray url('https://it-hack.net/storage/app/media/document/development/programming/css/properties/background/hacker-commandline.jpeg') 
                15px 15px / 70% no-repeat scroll content-box;
}
</style>

<div></div>

プレビュー