CSS:background指定をまとめる場合の注意

harada 27views 更新:2017年5月11日
.bg {
  background-color: rgba(0, 0, 0, 0.3);
  background-image: url("../img/bg.jpg");
  background-repeat: no-repeat;
  background-position: center 30%;
  background-size: cover;
}

このように背景画像を指定している場合、まとめて書くと以下のような記述になります。

background: rgba(0, 0, 0, 0.3)url('../img/bg.jpg') no-repeat scroll center 30% / cover;

background-positionとbackground-sizeをまとめる場合、2つの間に他の指定を入れるとエラーになります。
2つを並べて、間にスラッシュを入れて記述する必要があります。

参考:background – 背景の設定をまとめて指定する

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません