Estoy tratando de mezclar background-image
y background-size
propiedades en una background
propiedad escasa . Según la documentación del W3C, background-size
debe ir después de la background-position
propiedad separada con una barra inclinada ( /
).
Ejemplo de 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é este y este artículo sobre la propiedad de fondo CSS3 abreviada que explica esto.
¡Pero esto no está funcionando! Tampoco está claro cómo hacer una background
propiedad abreviada cuando background-size
y background-position
tener dos valores diferentes para background-position-x
y lo background-position-y
mismo para background-size
. ¿No está claro cómo /
se produce la barra ( )? Este ejemplo no funciona en mi Chrome 15.
Ejemplo que intenté hacer una abreviatura es 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 funciona ( 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;
}
Respuestas:
background-image
lugar debackground
Esto funciona en Opera: http://jsfiddle.net/ZNsbU/5/
Pero no funciona en FF5 ni IE8. (yay para navegadores obsoletos: D)
Codigo:
Podrías hacerlo así:
Que funciona en FF5 y Opera pero no en IE8.
fuente
background
.Puedes hacer como
fuente
Solo una nota de referencia: estaba tratando de hacer taquigrafía así:
pero los navegadores iPhone Safari no mostraban la imagen correctamente con un elemento de posición fija. No consulté con un no fijo, porque soy vago. Tuve que cambiar el CSS a lo que está debajo, teniendo cuidado de poner background-size después de la propiedad background. Si los hace al revés, el fondo revierte el tamaño del fondo al tamaño original de la imagen. Entonces, en general, evitaría usar la abreviatura para establecer el tamaño del fondo.
fuente
prueba así
fuente
Tendrá que usar prefijos de proveedor para admitir diferentes navegadores y, por lo tanto, no puede usarlos en forma abreviada.
fuente