/
background-imageは、背景画像 や グラデーションを指定するcssプロパティ。
1枚はもちろん、複数の画像やグラデーションを重ねる事も可能。
重ねたり、他の指定と組み合わせる事で様々な表現が可能になります。
background の種類
| . | 値 | 用途 | 親要素 |
|---|---|---|---|
| 1 | background-image | 背景画像、又は、グラデーション | カンマで繋いで複数指定可 |
| 2 | background-attachment | 位置の表示方法 | 固定(fix)するか要素と一緒にスクロールするか等 |
| 3 | background-position | 画像の初期位置 | 最初に表示される位置 |
| 4 | background-size | 画像のサイズ | 要素に対する相対、又は、指定サイズ |
| 5 | background-origin | 要素に対する配置(開始)位置 | 背景の開始点(左上)を指定する |
| 6 | background-clip | 画像自身の配置位置 | 指定に合わせ要素内でクリップされる |
| 7 | background-repeat | 画像の繰り返し | 繰り返しの有無、方向、配置を指定 |
| 8 | background-color | 背景色 |
background-image 規定サイズ
特に設定しない場合、Wordpressによっていくつかのサイズが作成されます。
| . | 項目名 | 指定名 | 規定サイズ | css指定 | 変更 | 切り抜き |
|---|---|---|---|---|---|---|
| 1 | サムネイル | thumbnail | 150x150 | -150x150 | 可 — 設定(メディア) | 切り抜き (crop) |
| 2 | 中サイズ | medium | 300x300 | -300x n | 可 — 設定(メディア) | 縦横比維持 |
| 3 | 大サイズ | large | 1024x1024 | -1024x n | 可 — 設定(メディア) | 縦横比維持 |
| 4 | --※ | medium_large | 768x0 | -768x n | 不可 — wp自動作成 | 縦横比維持 |
| 5 | --※ | — | 1536x1536 | -1536x n | 不可 — wp自動作成 | 縦横比維持 |
| 6 | --※ | — | 2048x2048 | -2048x n | 不可 — wp自動作成 | 縦横比維持 |
| 7 | --※ | scaled | 2560x0 | -2560x n | 不可 — wp自動作成 | 縦横比維持 |
| 8 | オリジナル | 半角英数, ハイフン, アンダーバー | 指定サイズ | -横幅 x n | 可 — functions.php | 縦横比維持 |
1～3ダッシュボード設定より自由にサイズ変更可能 (thumbnailのみ切り抜き・縦横比維持の選択可能 )4～7wp自動生成の為、サイズ変更や生成停止にしたい場合はプラグイン利用を推奨- 後からサイズを変えても登録済の生成画像は変更(削除)はされません。変更(削除)にはプラグイン(Regenerate Thumbnails 等) の利用が必要となります。
7-scaledは、2560px以上の画像がアップロードされた際に作成され、元画像の代わりに表示されます。- 規定サイズは、アップロードした画像のサイズ以下のみ生成されます。
- 「
large= アップロード画像」ではありません。 - 大サイズ が
1024pxのままで、800pxの画像をULした場合 large は作成されません。
この画像でlargeを指定した場合、「画像が表示されない」or「エラー」になる場合があります。 - 表示サイズに合わせて画像を作成した場合「サイズ指定をしない」or「確実に下のサイズのみ指定」をお勧めします。
- 「
background-image の指定方法
通常の指定方法
background-image: url("img/bg.jpg"); /* メディア以外で保存している画像 */
background-image: url("https://ドメイン/wp-content/uploads/2024/08/bg.jpg") /* メディアにULした画像 */- imgフォルダなど、メディアUL以外の画像は相対パスでOK。
- メディアにULした画像は メディアから「ファイルの URL」をコピーして貼り付けます。
特定サイズ (サムネイルサイズや中サイズなど) を呼び出す方法
cssで、メディアにアップロードした画像の特定サイズを簡単に呼び出せる方法はありません。
(thumbnail、medium 等では呼び出せません)
少々面倒ですが、画像パスの拡張子前にサイズを入れる事で、指定サイズの画像を呼び出すことができます。
(呼び出せるのは 生成済のサイズ のみです)
background-image: url("https://ドメイン/wp/wp-content/uploads/2024/08/bg-150x150.jpg").jpg(拡張子) の前にサイズ ハイフン横x縦 を入れます。( x = 英小文字エックス )
サムネイルサイズなど、切り抜きを指定している場合
切り抜きの場合は、上コードに横と縦のサイズを入れればOKです
縦横比を保持している場合
- 横 → 指定サイズを入れます。
- 縦 → 横幅を基準に、縦横比に合わせて計算した縦サイズを記入します。
縦 = (元画像の縦サイズ / 元画像の横サイズ) × 使用する横サイズ- 縦は、設定(メディア) 掲載のサイズと異なりますのでご注意ください
複数の背景画像を指定
重ねやすいよう、画像は3種類とも同じサイズで作成しています。
background一括指定を利用すれば、異なるサイズの画像を組み合わせたりレイアウトを変える事も可能です^^
上の画像の「HTMLとCSS」を見る
下の画像を使用して作成しています。
HTML code
<div class="t12"></div>CSS code
<style>
.t12 {
aspect-ratio: 60 / 37; /* 出来上がりの縦横比 */
width: 100%; /* 横幅 */
max-width: 600px; /* 横幅-最大 */
margin-bottom: 24px;
background-image: /* ３種類の背景をカンマで繋いで記載 */
url("https://ドメイン/wp-content/uploads/2024/09/bgi1.png"),
url("https://ドメイン/wp-content/uploads/2024/09/bgi2.png"),
url("https://ドメイン/wp-content/uploads/2024/09/bgi3.jpg");
background-size: cover; /* 背景サイズ */
}
</style>■ 背景画像 1 ( 上 )
bgi1.png- サイズ:
600×370px - タイプ:
png24(透過)
■ 背景画像 2 ( 中 )
bgi2.png- サイズ:
600×370px - タイプ:
png24(透過)
■ 背景画像 3 ( 下 )
bgi3.jpg- サイズ:
600×370px - タイプ:
jpg
複数の背景画像の説明
サンプルはテキスト等の内容を入れていません。cssでサイズを確保するようにしています。
- 背景画像は要素に高さを与えない為、
aspect-ratioで背景画像の縦横比を指定した上で、widthを指定します。
このような指定にする事で、縦横比を保ったまま画面サイズに合うようになります。 - カンマ
','で繋ぐことで複数の背景(画像やグラデーション)を重ねる事ができます。 - プロパティ(
background-image:) に近い位置に書かれた値が上、遠くなるほど下に、という順番で重なります。 - 要素を背景画像と同じ比率にしているので、
background-size: cover;にしていますが、必要に応じてサイズ指定は変更してください。