クイックCSS早見表(background)

よく使う背景デザインを整えるCSSのコードをまとめました。

背景色(background-color)

CSS

 

説明
#カラーコード カラーコードを指定して背景色を設定します。
transparent 背景を透明色に設定します

 

背景画像(background-image)

CSS

 

説明
url(スタイルシートからの画像の相対パス) 指定URLの画像を背景画像として設定する
none 背景画像なし

 

背景画像のサイズ(background-size)

CSS

 

説明
auto 自動算出
contain 縦横比は保持、背景領域に収まる最大サイズ
cover 縦横比は保持、背景領域を完全に覆う最小サイズ
px 幅、高さをpxで指定
% 幅、高さを%で指定

 

背景画像の繰り返し(background-repeat)

CSS

 

説明
repeat 縦と横に繰り返す
repeat-x 横のみ繰り返す
repeat-y 縦のみ繰り返す
no-repeat 繰り返しなし

 

背景画像の位置(background-position)

CSS

 

説明
left,center,right,%,px 横方向の位置指定
top,center,bottom,%,px 縦方向の位置指定

 

 

おすすめの記事