tamaño - propiedades background css

tamaño de fondo en propiedad taquigráfica de fondo(CSS3)

Question

Intento mezclar las propiedades de la background-image background-size en una propiedad de background descuidada. Según la documentación del W3C background-size debe aparecer después background-position separar la propiedad de background-position con una barra inclinada ( / ).

Ejemplo W3C:

p { background: url("chess.png") 40% / 10em gray
round fixed border-box; }

es 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 dice lo mismo. También encontré this y this artículo sobre la taquigrafía de la propiedad de fondo de CSS3 explicando esto.

¡Pero esto no está funcionando! Tampoco está claro cómo crear una propiedad de background taquigráfica cuando background-size background-position tienen dos valores diferentes para background-position-x y background-position-y o lo mismo para background-size . No está claro cómo se produce la barra inclinada ( / )? Este ejemplo no funciona en mi Chrome 15.

Ejemplo. Intenté hacer una taquigrafía con 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;
}

Un ejemplo más limpio

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

Esto no está funcionando ( jsfiddle )

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

Esto tampoco funciona ( jsfiddle )

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

Answer 1

1. Su jsfiddle usa background-image lugar de background
2. Parece ser un caso de "aún no compatible con este navegador".

Esto funciona en Opera: http://jsfiddle.net/ZNsbU/5/
Pero no funciona en FF5 ni IE8. (yay para los navegadores obsoletos: D)

Código:

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

Podrías hacerlo así:

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

Que funciona en FF5 y Opera pero no en IE8.

Answer 2

Deberá usar prefijos de proveedor para admitir diferentes navegadores y, por lo tanto, no podrá usarlo en forma abreviada.

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

Answer 3

Puedes hacer lo

 body{
background:url(''equote.png''),url(''equote.png'');
background-size:400px 100px,50px 50px;
}

Answer 4

Solo una nota de referencia: estaba intentando hacer taquigrafía así:

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

pero los navegadores Safari de iPhone no mostraban la imagen correctamente con un elemento de posición fijo. No revisé con un no fijo, porque soy flojo. Tuve que cambiar el CSS a lo que está debajo, teniendo cuidado de poner el tamaño de fondo después de la propiedad de fondo. Si lo haces en reversa, el fondo revierte el tamaño de fondo al tamaño original de la imagen. Por lo tanto, generalmente evitaría usar la abreviatura para establecer el tamaño de fondo.

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

Answer 5

prueba de esta manera

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