Característica del Background en CSS

por
CSS background

Tabla de contenidos

El elemento background tenemos acceso directo a las propiedades en CSS que nos permite modificar las opciones de formato que están agrupadas en una. En esto también se incluyen el color o la imagen, el principio, tamaño, método de repetición y otras características.

Propiedad se puede utilizar background para ajustar y asignar valores de las funciones o características de las siguientes propiedades: background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size y background-attachment.

Funciones y aplicaciones del background

Valor por defectoLos valores de los atributos se establecerán en sus valores iniciales:
background-image = none
background-position = 0% 0%
background-size = auto auto
background-repeat = repeat
background-origin = padding-box
background-clip = border-box
background-attachment = scroll
background-color = transparent
Aplicado aTodos los artículos.
HeredableNo
Animablesí
/* <color de fondo> */ 
background :  green;

/* <bg-image> <repeat-style> */ 
background :  url ("image_fondo.png")  repeat-y;

/* <cuadro> <color de fondo> */ 
background :  border-box  yellow;

/* una imagen centrada y redimensionada */ 
background :  no-repeat  center/60 %  url ("image_fondo.png");

La propiedad abreviada background establecerá los valores que se le asignan y restablecerá por defecto los atributos para los que no hemos establecido o asignado un valor en su valor inicial.

Ejemplos del uso de background

En esta sección, revisaremos ejemplos del background acrónimo y sus propiedades singulares equivalentes.

Esta regla hará que el color de fondo sea verde:

background:  green;

La regla anterior es equivalente a las siguientes reglas. Tenga en cuenta que todas las propiedades se establecen en sus valores iniciales excepto la propiedad background-color:

background-color:   green; 
background-position:   0%  0%; 
background-origin :   padding-box; 
background-attachment:  scroll; 
background-image:  none;
background-size:   auto; 
background-repeat :   repeat; 
background-clip:    border-box;

En cuanto a estas funciones varios parámetros, como ajustar la imagen de fondo se usa (background-image); para determinar su posición (background-position) y luego ajusta su escala especificando el valor (background-size) de la propiedad separándose del valor de la propiedad (background-position). Tenga en cuenta que la repetición de la imagen de fondo es (background-repeat), esta se ajustará a través de la palabra reservada round. Para la posición de la imagen tenemos (background-attachment) será una constante fija fixed, y ajustará el valor de las propiedades background-origin y  background-clip juntos estarán reservados para la palabra border-box:

background: url(imagen_fondo. png) 40%/10em blue round fixed border-box;

La aplicación anterior es equivalente a las siguientes reglas:

background-color:   blue ; 
background-position:    40 %  50 %; 
background-size:    10em ; 
background-repeat:    round; 
background-clip:     border-box; 
background-origin:    border-box; 
background-attachment:  fixed; 
background-image:    url(imagen_fondo.png );

Soporte del background por los navegadores

CaracterísticaChromeFirefoxInternet ExplorerÓperaSafari
Soporte principal 1.0 1.0 4 3,5 1.0
Imágenes SVG como fondo de pantalla 31.0 9.0 9.0 21,0 5.1
Valores de propiedades background-size, background-origin y background-clip 21,0 22,0 9.0 21,0 5.1

Funcionamiento general de background

La propiedad define background una o más capas de fondo, las capas están separadas por una coma y la estructura de cada capa es la siguiente:

  • Cada capa puede contener como máximo uno de los siguientes valores:
    • <attachment>
    • <bg-image>
    • <position>
    • <bg-size>
    • <repeat-style>
  • Un valor puede <bg-size> aparecer inmediatamente después de un valor y <position> separado por un carácter «/«, como en center/80%.
  • El valor <box> cero se puede incluir una, una o dos veces; Y si lo configuramos una vez, establecerá el valor de las dos propiedades background-origin y background-clip, y  si lo configuramos dos veces, la primera vez establecerá el valor de la propiedad background-origin y la segunda vez establecerá el valor de la propiedad background-clip.
  • El valor solo se puede incluir <background-color> en la última capa.

<attachment>

Próximamente se escribirá características del background-attachment.

<box>

Próximamente se escribirá características del  background-clip y background-origin.

<background-color>

Próximamente se escribirá características del  background-color.

<bg-image>

Próximamente se escribirá características del background-image.

<position>

Próximamente se escribirá características del background-position.

<repeat-style>

Próximamente se escribirá características del background-repeat.

<bg-size>

Próximamente se escribirá características del background-size.

Estructura de uso

background:  [  <bg-layer> ,  ]*  <final-bg-layer>;

Para:

<bg-layer>  =  <bg-image >  ||  <position>  [  /  <bg-size>  ]?  ||  <repeat-style>  ||  <attachment>  ||  <box> { 1,2 } 
<final-bg-layer>  =  <bg-image>  ||  <position>  [  /  <bg-size>  ]?  ||  <repeat- style>  <attachment>  ||  <box>  ||  <box>  ||  <'background-color'>