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;
}

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.


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;
    }

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;

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 */

-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;
}

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,
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.