Estou tentando misturar background-image
e background-size
propriedades em uma background
propriedade reduzida . Com base na documentação do W3C, background-size
deve vir depois da background-position
propriedade 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 background
propriedade abreviada quando background-size
e background-position
ter dois valores diferentes para background-position-x
e background-position-y
ou 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;
}
Respostas:
background-image
vez debackground
Isso funciona no Opera: http://jsfiddle.net/ZNsbU/5/
Mas não funciona no FF5 nem no IE8. (yay para navegadores desatualizados: D)
Código:
Você poderia fazer assim:
Que funciona no FF5 e no Opera, mas não no IE8.
fonte
background
?Você pode fazer como
fonte
Apenas uma nota para referência: eu estava tentando abreviar assim:
mas os navegadores Safari do iPhone não exibiam a imagem corretamente com um elemento de posição fixa. Não chequei com um não consertado, porque sou preguiçoso. Tive que mudar o css para o que está abaixo, tendo o cuidado de colocar background-size após a propriedade background. Se você fizer isso ao contrário, o plano de fundo reverte o tamanho do plano de fundo para o tamanho original da imagem. Portanto, geralmente evito usar a abreviatura para definir o tamanho do fundo.
fonte
tente assim
fonte
Você terá que usar prefixos de fornecedores para oferecer suporte a navegadores diferentes e, portanto, não pode usá-los abreviadamente.
fonte