Ayer me dio por recopilar las propiedades que previsiblemente incluirá CSS 3 para controlar el fondo de cualquier elemento (en el medio visual) y sus correspondientes valores. Varias de ellas coinciden con las que habitualmente empleamos en nuestras hojas de estilo, con lo que no nos deberían resultar extrañas. El resto son nuevas propiedades que vienen a subsanar las carencias que los profesionales en CSS habían identificado.
A partir de ello he preparado la siguiente tabla:
| Propiedad | valor/es | por defecto | % |
|---|---|---|---|
| background-attachment | [scroll | fixed | local] [ , [scroll | fixed | local] ]* | scroll | - |
| background-clip | [border-box | padding-box] [ , [border-box | padding-box] ]* | border-box | - |
| background-color | <color> | transparent | - |
| background-image | [<image> | none] [ , [<image> | none] ]* | none | - |
| background-origin | [border-box | padding-box | content-box] [ , [border-box | padding-box | content-box] ]* | padding-box | - |
| background-position | [ [ [ <percentage> | <length> | left | center | right ] ] [ [ <percentage> | <length> | top | center | bottom ] ]? | [ center | [ left | right ] [ <percentage> | <length> ]? ] || [ center | [ top | bottom ] [ <percentage> | <length> ]? ] ]* | 0% 0% | si |
| background-repeat | [repeat-x | repeat-y | [repeat | space | round | no-repeat] ] [ , repeat-x | repeat-y | [repeat | space | round | no-repeat] ]* | repeat | - |
| background-size | [ [ <length> | <percentage> | auto ]{1,2} | cover | contain ] [ , [ <length> | <percentage> | auto ]{1,2} | cover | contain ]* | auto | si |
…y por supuesto, la forma shorthand:
background: [ <bg-image> || <bg-position> || / <bg-size> || <repeat-style> || <attachment> || <bg-origin> , ]* <bg-image> || <bg-position> || / <bg-size> || <repeat-style> || <attachment> || <bg-origin> || <’background-color’>
Algunas de las propiedades comienzan a tener soporte en las versiones más actuales de los navegadores (como ya mencioné en la entrada titulada Multiples imágenes de fondo con CSS 3), incluyéndose en algunos casos de forma experimental (por ejemplo en Firefox mediante el prefijo -moz).
nota: Os recuerdo que ninguna de las propiedades se hereda.
En breve, para dejar niquelao el tema y comprender claramente lo que podemos llegar a conseguir modificando las propiedades de fondo, explicaré en detalle lo que hace cada una de ellas.
Tweet