Día 14: Background Shorthand
La ruta del desarrollador web frontend autónomo🤹♂️
Propiedad abreviada background
Para acortar el código, también es posible especificar todas las propiedades de fondo(background) en una sola propiedad. Esto se llama una propiedad abreviada o shorthand en inglés.
En lugar de escribir:
Ejemplo:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Puedes usar la propiedad abreviada background:
Ejemplo:
Use la propiedad abreviada para establecer las propiedades background en una sola declaración:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
Cuando se usa la propiedad abreviada, el orden de los valores es la siguiente:
background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position
No importa si falta uno de los valores, siempre que los demás estén en este orden. Tenga en cuenta que no usamos la propiedad background-attachment en los ejemplos anteriores, ya que no tiene un valor.
Todas las propiedades background
| Propiedad | Descripción |
background | Establece todas las propiedades background en una declaración |
background-attachment | Establece si una imagen de fondo es fija o se desplaza con el resto de la página |
background-clip | Especifica el área de pintura del fondo. |
background-color | Establece el color de fondo de un elemento. |
background-image | Establece la imagen de fondo de un elemento. |
background-origin | Especifica dónde se coloca(n) la(s) imagen(es) de fondo |
background-position | Establece la posición inicial de una imagen de fondo |
background-repeat | Establece cómo se repetirá una imagen de fondo |
background-size | Especifica el tamaño de la(s) imagen(es) de fondo |
Resumen
La propiedad abreviada background permite especificar todas las propiedades de fondo en una sola propiedad. En lugar de escribir varias propiedades, se puede usar la propiedad abreviada para establecer todas las propiedades background en una sola declaración.
Traducido con 💚 desde W3Schools.com