CSS

background のショートハンドで background-size が設定できない

More than 3 years have passed since last update.

今回もコリスさんの記事を見て,真似してみた.

記事を見る前の設定では,background-size: cover; をつけてなかったので,ブラウザの幅を変えても背景画像の一部しか表示されなかった.これをなんとかしたいなーと思っていたときのコリスさん!!本当にお世話になっております.m(_ _)m


background-size を設定する


無難なやり方

記事内にあるとおり,個別に指定する方法でやったら何事もなくうまくいった.


style.css

body {

background-image: url(path2image);

background-position: center center;

background-repeat: no-repeat;

background-attachment: fixed;

background-size: cover;

background-color: #47D3DA;
}



ショートハンドを使って失敗したやり方

しかし,無難なやり方だとコードが長くなってごちゃごちゃになる.1 行で収めてすっきりさせたかったのでショートハンドを使う方法でやってみた.


style.css

body {

background: url(path2image) center center cover no-repeat fixed;
}

すると,画像が表示されないのです.

なんでや!!!1と思いながらいろいろ調べた結果,解決しました.


ショートハンドを使って設定する方法

Dash を使って CSS のリファレンスを見てみました.

Screen Shot 2014-07-08 at 0.11.56.png

すると background-size の所に書いてあった!


This property must be specified after background-position, separated with the '/' character.


background-position のあとに / をはさんで書けということらしい.

というわけで先ほどの失敗したやり方のコードを以下のように変更.


style.css

body {

background: url(path2image) center center /cover no-repeat fixed;
}

これでうまくいきました(∩´∀`)∩ワーイ

※リファレンス読むのって大事.あと Dash 便利.