【CSS】background - 背景の設定
CSSのbackgroundプロパティについてご紹介します。
background
backgroundは背景の一括設定プロパティです。
基本構文
background: 値;値
背景色
背景の色（カラー）です。
個別で設定するにはbackground-colorを使います。
背景画像
背景の画像です。
個別で設定するにはbackground-imageを使います。
繰り返し
背景画像の繰り返しです。
個別で設定するにはbackground-repeatを使います。
サイズ
背景画像のサイズです。
個別で設定するにはbackground-sizeを使います。
表示開始位置
背景画像の表示開始位置です。
個別で設定するにはbackground-originを使います。
表示範囲
背景画像の表示範囲です。
個別で設定するにはbackground-clipを使います。
表示位置
背景画像の表示位置です。
個別で設定するにはbackground-positionを使います。
スクロール
背景画像のスクロールです。
個別で設定するにはbackground-attachmentを使います。
サンプル
背景色
<style>
div {
width: 250px;
height: 250px;
background: red;
}
</style>
<div></div>背景画像１
<style>
div {
width: 250px;
height: 250px;
border: 1px solid black;
background: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg');
}
</style>
<div></div>背景画像２
<style>
div {
width: 250px;
height: 250px;
padding: 30px;
border: 1px solid black;
background: url('https://it-hack.net/storage/app/media/image/app-programing%40100x66.jpg') 15px 15px / 70% no-repeat scroll content-box;
}
</style>
<div></div>
