ショートハンドのプロパティbackground-image
とbackground-size
プロパティを混在させようとしていbackground
ます。W3Cのドキュメントに 基づいて、スラッシュ()で区切られたプロパティのbackground-size
後に来る必要がありbackground-position
ます/
。
W3Cの例:
p { background: url("chess.png") 40% / 10em gray round fixed border-box; }
以下と同等です。
p { background-color: gray; background-position: 40% 50%; background-size: 10em 10em; background-repeat: round round; background-clip: border-box; background-origin: border-box; background-attachment: fixed; background-image: url(chess.png) }
MDNも同じことを言っています。これと、これを説明するCSS3の簡単な背景プロパティに関するこの記事も見つけました。
しかし、これは機能していません!またbackground
、background-size
とのbackground-position
2つの異なる値background-position-x
、background-position-y
またはと同じものがある場合に、省略プロパティを作成する方法も明確ではありませんbackground-size
。スラッシュ(/
)がどのように行われるかは明らかではありませんか?この例は私のChrome 15では機能しません。
私が略記を作ろうとした例はこのCSSコードです:
div {
background: url(http://www.placedog.com/125/125)
0 0 / 150px 100px
repeat no-repeat
fixed border-box padding-box blue;
height: 300px;
width:360px;
border: 10px dashed magenta;
}
よりクリーンな例
これは機能しています(JSFiddle)
body{
background-image:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png);
background-position:200px 100px;
background-size:600px 400px;
background-repeat:no-repeat;
}
これは機能していません(jsfiddle)
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}
これも機能していません(jsfiddle)
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}