background-size na propriedade abreviada de background (CSS3)

112

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;
}
Mohsen
fonte
3
Cuidado com o Safari que não suporta taquigrafia de fundo! Safari não suporta! Coloque o tamanho do seu plano de fundo separado do seu plano de fundo para evitar que o Safari sufoque!
Jeff

Respostas:

63
  1. Seu jsfiddle usa em background-imagevez debackground
  2. Parece ser um caso de "ainda não compatível com este navegador".

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:

body {
  background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 200px / 600px 400px no-repeat;
}

Você poderia fazer assim:

body {
    background:url(http://www.google.com/intl/en_com/images/srpr/logo3w.png) 400px 400px no-repeat;
    background-size:20px 20px
}

Que funciona no FF5 e no Opera, mas não no IE8.

Kraz
fonte
Você acha que não é um problema de suporte do navegador?
Kraz
1
Só estou me perguntando qual é a especificação certa para CSS3 background?
Mohsen
É o que o W3C definiu, exatamente como você fez na sua pergunta ou no meu exemplo de código. Ainda não está implementado em todos os navegadores.
Kraz,
Não está funcionando no Chrome Canary. Não acredito que ainda não foi implementado.
Mohsen
Selecionado como resposta para esta parte: Parece ser o caso "ainda não compatível com este navegador".
Mohsen
14

Você pode fazer como

 body{
        background:url('equote.png'),url('equote.png');
        background-size:400px 100px,50px 50px;
    }
vignesh
fonte
Isso é o que mais me ajudou; Eu não sabia que você podia dividir as declarações de tamanho de fundo com uma vírgula, uma para cada url acima dela.
Nathaniel Flick
9

Apenas uma nota para referência: eu estava tentando abreviar assim:

background: url('../images/sprite.png') -312px -234px / 355px auto no-repeat;

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.

background: url('../images/sprite.png') -312px -234px no-repeat;
background-size: 355px auto;
Daniel
fonte
O mesmo aqui no navegador de
ações
1

tente assim

body {
   background: #fff url("!--MIZO-PRO--!") no-repeat center 15px top 15px/100px;
     }


/* 100px is the background size */
MizoPro
fonte
-5

Você terá que usar prefixos de fornecedores para oferecer suporte a navegadores diferentes e, portanto, não pode usá-los abreviadamente.

body { 
        background: url(images/bg.jpg) no-repeat center center fixed; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
}
Moin Zaman
fonte
1
Isso não está correto. Não preciso usar o prefixo do fornecedor se não quiser oferecer suporte a navegadores antigos
Mohsen
Os prefixos deste fornecedor ainda funcionam e alguns navegadores podem tê-lo abandonado recentemente.
Moin Zaman,