【CSS-rules】background一括指定(背景画像の指定方法と説明)

[公開] 2024-08-26 / [更新] 2024-09-04

backgroundは、要素の背景画像 or グラデーションに関するスタイルを指定するcssプロパティ。
一括指定を使う事で、コードが簡略化できるだけでなく、よりリッチな表現が可能になります。

backgroundを上手く使う事で、HTMLと装飾を分離。

HTMLから装飾の為だけの無駄な記述を省く事で、HTML本来の目的に沿った見やすくSEOに適した文書になります。
cssのみの設定になる為、メディアクエリ(ブレークポイント)が自由に設定できレスポンシブ対応もしやすくなります^^

background の種類

以下の8種類を一括、又は、個別に指定します。
また、一括指定と個別指定を組み合わせて使用する事も可能です。

.	値	用途	親要素
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 の一括指定

各プロパティをまとめて指定します

background: 1-image 2-attachment 3-position / 4-size 5-origin 6-clip 7-repeat 8-color;

必要なプロパティのみ記載します (初期値のままや特に指定の必要ないプロパティは記載不要)。
指定順は任意です。
position と sizeを併せて指定する場合は間にスラッシュ’/‘ を入れ position / size と記載します。(スラッシュ前後のスペースは任意 )
個別の一括指定をカンマ','で繋いで、複数指定(重ねがけ)する事もできます。

background 一括指定サンプル

これは「How far can I go?」とだけ記入したBOXに、背景画像 2枚 + グラデーションを重ねて作成しています。

How far can I go?

画像を組み合わせて、加工して、という手間が省けますよ^^v

background一括指定基本の設定

上の画像の「HTMLとCSS」を見る

下の画像(背景基本データ)を使用して作成しています

HTML code

<div class="t12a">How far can I go?</div>

CSS code

<style>
.t12a {
  aspect-ratio: 60 / 35; /* 出来上がりの縦横比 */
  width: 100%;           /* 横幅 */
  max-width: 600px;      /* 横幅-最大 */
  padding: .5em 1em 0;
  font-weight: 500;
  font-size: clamp(1.8rem, 3.8vw, 4.2rem); /* 文字サイズを可変に */
  line-height: 1.4;
  color: #fff;
  background:    /* ３種類の背景をカンマで繋いで記載 */
    url("https://～～/bog-img1.png") 0 0 / cover no-repeat, /* 上 */
    linear-gradient(to bottom, #000 0%, transparent 30%),  /* 中-グラデーション */
    url("https:/～～/bg-img2.png") 50% 100%/75% auto no-repeat; /* 下 */
}
</style>

背景基本データ (2画像 + グラデーション)

■ 背景画像 1 ( 上 )

bog-img1.png
サイズ:450×126px
タイプ:png24(透過)

■ 背景画像 2 ( 下 )

bg-img2.jpg
サイズ:600×350px
タイプ:jpg

■ グラデーション (中 )

文字部分がハッキリ出るよう、１枚目と２枚目の間に linear-gradient() (グラデーション)を入れます。

基本の設定の説明

レスポンシブ対応のオーバーライドを、出来るだけ無くす設定にしています。

backgroundの指定

一括指定をカンマ','で繋ぐことで複数の背景(一括指定)を重ねる事ができます。
linear-gradient() も背景画像として扱われる為、画像と併せて指定する事ができます。
プロパティ(background:) に近い位置に書かれた値が上、遠くなるほど下に、という順番で重なります。

background以外の指定

要素に対し背景画像の高さは影響しませんので、要素に高さを指定する必要があります。
要素のwidth,height を実寸で指定すると、ブレークポイントでの書き換えや面倒な計算が必要となる為、aspect-ratio:で縦横比を指定した上で、with:100%などのレスポンシブ対応の指定にします。
レスポンシブ対応用に、文字サイズは clamp()で指定しています。

background一括指定メディアクエリでの変更

上の画像でも「sp時はワンコをもっと大きく表示したい」とかありますよね。
そんな時はメディアクエリでササっと変更しましょう。

How far can I go?

メディアクエリを見る

CSS code

@media screen and (max-width: 400px){
  .t12a {
    background-position: 85% 100%, 0, 0 0;   /* 修正箇所, グラデーション用規定値 */
    background-size: 125% auto, 100%, cover; /* 修正箇所, グラデーション用規定値 */
  }
}

メディアクエリの説明

たった2行設定するだけで、ワンコの位置や大きさを変える事ができます^^

サンプルは400pxで設定していますが、必要に応じて変更してください。
変更するのは、位置とサイズだけ。それぞれ個別指定で対応させます。
- 元の指定で 3個の背景を設定していますので、変更用のbackground-position, background-size にも、3個分の指定が必要となります。
- linear-gradient は規定値のままなので、元の設定では位置やサイズを記載していませんが、個別指定でオーバーライドする場合はlinear-gradientの分の記載も必要です。
- ワンコの位置を絶対値など他の指定方法にすれば、左の2匹だけを見せるなどの違った表現も可能です。

background を使うメリット・デメリット

メリット

何より、HTMLに無駄な記述が無くなる事でミスが減りメンテしやすい文書になる事。
また、全てCSSでの調整にする事で修正やレスポンシブ対応がしやすくなります。

HTMLに本来必要なテキストのみを載せる事で、メンテしやすくSEOに優れた文書になる。
テキストを変えたり、レスポンシブ用にバランスを変えるなど変更が簡単になる
- テキストベースだからテキスト変更は秒殺 !!
- 文字サイズやレイアウト変更もメディアクエリで完結。
- デバイスや画面サイズで「画像を変えたい」「位置を変えたい」時もメディアクエリで指定すればOK。
レスポンシブの際、cssのメディアクエリで完結する為、<picture>で変更するより手軽に細かい設定が可能になる。
内容にもよるが、個々の画像サイズ(バイト)を抑えられ、個別に読み込ませることで、読み込みの負担が減る。
背景画像やレイアウトの移動などがメディアクエリで済むため「修正の度に手のかかる加工画像を新しく作成する」といった工程が必要なくなる。

デメリット

内容に応じた背景であれば問題ありませんが、背景をメインにする場合は縦横比を指定する必要があります。

また、設定によりcssが肥大化しやすく、複数を組み合わせる場合などはある程度の慣れが必要です。

.haccess, プラグイン等で対応していない場合、webp非対応ブラウザの対応をcssで行うと複雑になりやすい。
メディアにアップロードした画像を使用する場合、URLをコピペしてくる必要がある。
また、メディア画像の「サムネイルサイズ」や「中サイズ」などリサイズされた画像を使いたい場合は、サイズを追加したURLにする必要がある。(計算が必要なのでちょい面倒 _ _; 詳細はこちら ▶ )
複数を重ねる場合、最初にバランスを決めておく必要がある為、初期工程は一枚画像にする場合とあまり変わらない事がある。
写真1枚や、png向きの画像を重ねる場合は問題にならないが、今回のサンプルのように写真を透過pngにすると、それだけでサイズ(バイト)大きくなる事がある。

【CSS-rules】background一括指定