【CSS】backgroundによる画像の読み込み

CSS

2021/05/27

画像の読み込み

backgroundプロパティは背景色を設定するためによく使用します。

background: #fff;
/* 以下でも可 */
background-color: #fff;

backgroundは背景色だけでなく、画像の読み込みが可能です。画像の読み込みにはbackground-imageを使用します。

HTML

<div class="sample-img"></div>

CSS

.sample-img {
  background-img: url(画像のURL);
  width: 300px;
  height: 300px;
}

読み込んだ画像は、要素の領域の分だけ表示されます。デフォルトでは画像のサイズは変化せず、要素のサイズより大きい場合は切り取られ、小さな場合は繰り返されます。

これは、以下より説明するプロパティによって変化させることができます。

関連プロパティ

background-repeat

画像が要素のサイズより小さい場合の繰り返しに関するプロパティです。デフォルトはrepeatになります。

CSS

background-repeat: repeat;

値	説明	サンプル
`repeat`	水平・垂直方向に繰り返す。サイズが合わないところは途中で切れる。
`repeat-x`	水平方向に繰り返す。サイズが合わないところは途中で切れる。
`repeat-y`	垂直方向に繰り返す。サイズが合わないところは途中で切れる。
`space`	サイズにちょうど収まるように繰り返しの間に余白ができる。
`round`	サイズにちょうど収まるように画像を伸縮させる。
`no-repeat`	繰り返さない。

background-size

画像のサイズに関するプロパティです。デフォルトでは画像のサイズがそのまま表示されます（auto）。

CSS

background-size: 100%;

値	説明	サンプル
`%`	要素の幅、高さを`100%`とする割合を指定する。 `background-size: 幅高さ;`で指定する。高さは省略でき、省略した場合は`auto`になる。
`px`など	要素の幅、高さを`px`などの長さで指定する。 `background-size: 幅高さ;`で指定する。高さは省略でき、省略した場合は`auto`になる。
`contain`	要素、画像の縦横比を考慮し、`width`と`height`の内大きな方を`100%`とするように画像を伸縮する。
`cover`	要素、画像の縦横比を考慮し、`width`と`height`の内小さな方を`100%`とするように画像を伸縮する。

background-clip

画像の表示領域に関するプロパティです。初期値はpadding-boxです。

CSS

background-clip: padding-box;

値	説明	サンプル
`border-box`	`border`を表示領域として含む。
`padding-box`	`padding`を表示領域として含む。
`content-box`	コンテンツを表示領域とする。
`text`	文字部分のみを表示領域とする。 `-webkit-background-clip: text;`と `color: transparent`を一緒に指定する必要がある。	Text TEXT

background-origin

画像の表示開始位置（左上）に関するプロパティです。デフォルトはpadding-boxです。

CSS

background-origin: padding-box;

値	説明	サンプル
`border-box`	開始位置に`border`を含める。
`padding-box`	開始位置に`padding`を含める。
`content-box`	コンテンツを開始位置とする。

background-position

背景の表示位置に関するプロパティです。 background-originで指定した開始位置を基準に表示位置を指定します。

CSS

background-position: top;

例	サンプル
`top`
`right`
`bottom`
`left`
`top right`
`25px 75px`
`right 25px bottom 100px`

background-attachment

スクロール要素に対する、背景画像の固定に関するプロパティです。デフォルトはscrollです。値によってcontent-sizeが無効になります。

HTML

<div class="scroll">
  <div class="contents"></div>
</div>

CSS

.scroll {
  background-image: url(画像のURL);
  background-attachment: scroll;
  height: 250px;
  overflow-y: scroll
}
.contents {
  height: 1000px;
}

値	説明	サンプル
`scroll`	背景画像を固定してスクロールする。	TEXT
`local`	コンテンツに合わせて背景画像もスクロールする。	TEXT
`fixed`	背景画像を固定してスクロールする `scroll`と異なり親のスクロールにも適用される。	TEXT

img タグ

以下のように、<img>で画像を読み込むことも多いかと思います。

HTML

<img src="画像のURL" alt="注釈">

画像サイズについては、<img>のwidth、height属性、または CSS プロパティのwidth、heightによって指定することができます。どちらか 1 つのプロパティを指定すれば、縦横比を保つようにもう 1 つのプロパティが自動で調整されます。どちらも指定した場合は、サイズに合わせて画像が伸縮します。

HTML

<img src="画像のURL" style="width: 200px">
<img src="画像のURL" style="width: 200px; height: 100px">

このサイズについて、以下のプロパティがあります。

object-fit

画像をサイズ内でどのように表示するかを決めるプロパティです。デフォルトはfillです。

値	説明	サンプル
`fill`	サイズに合わせて画像を伸縮
`contain`	縦横比を保ったまま画像全体が表示されるように伸縮
`cover`	縦横比を保ったままサイズすべてに画像が表示されるように伸縮
`none`	画像そのままの大きさをサイズ内で表示
`scale-down`	画像がサイズより大きい場合は`contain`、小さい場合は`none`となる