Estou tentando misturar background-imagee background-sizepropriedades em uma backgroundpropriedade reduzida . Com base na documentação do W3C, background-size deve vir depois da background-positionpropriedade separada por uma barra ( /).
Exemplo W3C:
p { background: url("chess.png") 40% / 10em gray round fixed border-box; }é equivalente a:
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 diz a mesma coisa. Também encontrei este e este artigo sobre a abreviação da propriedade de fundo CSS3 explicando isso.
Mas isto não está funcionando! Também não está claro como criar uma backgroundpropriedade abreviada quando background-sizee background-positionter dois valores diferentes para background-position-xe background-position-you a mesma coisa para background-size. Não está claro como a barra ( /) ocorre? Este exemplo não está funcionando no meu Chrome 15.
Exemplo que tentei resumir é este código 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;
}
Um exemplo mais limpo
Isso está funcionando ( 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;
}
Isso não está funcionando ( jsfiddle )
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px 100px/600px 400px no-repeat;
}
Isso também não está funcionando ( jsfiddle )
body{
background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 200px/400px 100px/600px no-repeat;
}