実はbackground-imageにもinheritは使える

CSSの値継承で使われる inherit が background-image でも使えた話。

サンプル

See the Pen background inherit test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

よくあるサムネイルの一覧表示では background-size:cover で背景画像を敷き詰めるという方法があります。この手法は一般的ですが、表示幅によって見切れが発生します。

その見切れがイヤ！となると background-size:contain で対応できるのですが、contain の場合は幅が余ります。

backgroud-size	効果	メリット・デメリット
cover	背景画像の短辺ベースではめ込まれる	要素内が隙間なく背景画像で埋め尽くされるが、画像が見切れる
cntain	背景画像の長辺ベースではめ込まれる	画像の全体が確実に表示されるが、要素内に余白ができる

上記サンプルの手法は、

• :before に親要素の背景を継承し cover で見切れても引き伸ばす
• :after に親要素の背景を継承し contain で見切れず表示する

というハイブリッドな手法で実現しています。

CSS

.art {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 30px auto 0;
  border-radius: 4px;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.art:before, .art:after {
  content: "";
  position: absolute;
  background-image: inherit;
  background-repeat: inherit;
  background-position: inherit;
}
.art:before {
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  background-size: cover;
  filter: blur(10px);
  /*
  サイズを少し大きくしてネガティブマージンを取っているのは、
  blurによるフチのボケを回避してきれいに見せるため。
  */
}
.art:after {
  width: 100%;
  height: 100%;
  background-size: contain;
}

親要素の .art にはWordPressなど動的にサムネイルを設定する実用シーンを考慮しHTMLで background-image を埋め込んでいます。

疑似要素へ動的に背景をはめ込められないか考えたところ、 inherit を試したらうまく行ったという寸法です。

まとめ

inherit の仕様上当然のことかもしれないのですが、「値を継承する」という先入観から画像も継承できることに目からウロコだったのでつい書き残しました。

画像パスもただの文字列なので値っちゃ値ですね。