2.4 KiB
| title | localeTitle |
|---|---|
| CSS3 Backgrounds | Fondos CSS3 |
Fondos CSS3
La propiedad abreviada de background CSS se usa para definir propiedades de múltiplos como:
background-color background-image background-repeat background-attachment background-position
Color de fondo
El background-color propiedad especifica el color de fondo de un elemento.
background-color : #F00;
Imagen de fondo
La propiedad background-image especifica una imagen para usar como fondo de un elemento. Por defecto, la imagen se repite para cubrir toda la superficie del elemento.
background-image: url("GitHub-Mark.png");
Imagen de fondo - Repetición
Por defecto, la propiedad de la background-image repite en los ejes X e Y. Si desea establecer un eje, como el eje X, use el tipo de propiedad de background-repeat :
background-image: url("GitHub-Mark.png");
background-repeat: repeat-x;
Pero a veces no quieres tener tu fondo en toda la superficie, debes especificarlo escribiendo:
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
Imagen de fondo - Posición
Puede especificar la posición del fondo escribiendo:
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position : left bottom;
Se establecerá el fondo en la parte inferior izquierda del elemento.
Imagen de fondo - Posición fija
Si desea tener una imagen de fondo que no se desplace con el resto de la página, puede usar la propiedad background-attachement :
background-image: url("GitHub-Mark.png");
background-repeat: no-repeat;
background-position: left bottom;
background-attachment: fixed;
Propiedad de taquigrafía
Puede pasar todas las propiedades en un background super-propiedad:
background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
Cuando usas la propiedad de taquigrafía, debes respetar este orden:
- Color de fondo
- Imagen de fondo
- Repetición de fondo
- Adjunto de fondo
- Posición de fondo
No importa si falta una propiedad, siempre que respete el pedido:
background: url("GitHub-Mark.png") no-repeat left bottom;
Esto funcionará incluso si faltan el color y el accesorio.