El fondo o background

Cuando visitamos una página web vemos imágenes, textos, tablas... todos esos elmento están situados sobre un fondo. Es como si estuvieras escribiendo en un papel. El papel es el fondo y puede tener colores o tener una imagen al agua. Pero además puedes escribir difernetes párrafos con distibntos colores de fondo o escribir en un cuadro cuyo fono sea una imagen.

En el lenguaje CSS el fondo de cualqer elemento de la página se define mediante el atributo background. Es un atributo compuesto aunque se puede definir usando la abreviaturas típicas de CSS.

Un fondo puede crearse con:

  • una superficie de color uniforme
  • una superficie con colores degradados
  • usando una o más imágenes

En resumen los atributos que pueden aplicarse el background de una pa´gina son los siguientes

Propiedad Uso  
background-clip A qué parte de un elmento se aplica el fondo, según el CSS Box boder-box, padding-box, content-box
background-color Color del fondo Código de color
background-image Imágenes o gradientes de color usadas para el fondo Url,s separadas por comas

Para definir un fondo lo primero que necesita CSS es saber que parte del contenedor se va a aplicar el fondo. Puede que cubra todo el bloque entre los bordes, o que solo se rellene el contenido o se incluya el relleno. Esto se define con background-clip

atributos para background css3

Si usas como valor border-box (el valor por defecto) el fondo inlcuirá todo el bloque, si le das como valor padding-box el fondo ocupar la parte del relleno y el contendio y si usas el valor conten-box, solo rellenará la parte de contendio, el borde y el relleno quedan fuera.

Las tres posibilidades

Content-box:
rellena solo el contenido
padding-box:
también cubre el relleno
border-box:
cubre también el borde

En los tres ejemplos se ha usado el mismo estilo, la única diferencia está en el valor de background-clip. Los valores padding-box y border-box no presentan diferencia si se utiliza un borde con color. El estilo usado para los tres bloques ha sido

<style>

width:300px;

margin:10px;

padding:10px;

border: 20px solid transparent;

background-color: lightblue;

background-clip: border-box /*content-box o padding-box, según el caso*/

</style>

La linea alrededor no es un borde es un outbox para mostrar con más claridad la diferencia entre los tres posibles valores. Ambas propiedades se pueden asignar con el modo abreviado background, en este caso background: lightblue padding-box por ejemplo.

Los fondos ayudan a resaltar alguna parte del texto o a diferenciar diferentes zonas sin necesidad de acudir a bordes.

Los colores y gradientes

El fondo más simple de definir es el fondo con un color simple que lo cubra por completo. Tan solo hay que asignar el color que se quiera usar a la propiedad background-color. Pero CSS3 tambien nos permite utilizar gradientes de color, transiciones entre varios colores sin necesidad de utilizar imágenes. Existen gradientes lineales y gradientes radiales, que a su vez pueden repetirse como un patrón.

Gradiente lineal
Gradiente radial

Un gradiante o degradado de color es una transición gradual entre colores, por tanto para definirlo se necesita indicar como mínimo dos colores: el inicial y el final (pueden ser el mismo pero con distinta trasnparencia). Se pueden definir más para crear una degradado multicolor.

Por defecto cada color del gradiente se reparte por igual entre tantas zonas como colores tenga definidos, pero esto se puede modificar indicando donde acaba cada color y comienza el siguiente, esto se logra usando un distancia al origen del degradado usando valor absoluto o un porcentaje del tamaño del fondo a cubrir.

El origen del degradado es el lugar desde donde comienza a producrise el cambio de colores, en un degradado radial sería un punto central y en uno lineal será una linea.

En cualquier tipo de gradiente los colores se especifican como una lista de colores (código o nombre) que pueden ir seguidos de una medidas (absolutas o porcentajes) sobre el lugar donde finaliza ese color en el degradado:

background-image : radial-gradient(circle, red, orange 10%, yellow 20%);

background-image : linear-gradient(to bottom, rgba(255,0,0,0), rgba(255,0,0,1);

Se pueden usar transiciones con transparencias usando un único color con valores distintos para su opacidad, en el último ejemplo se pasa de un rojo transparente rgba(255,0,0,0) a un rojo totalmente opaco rgba(255,0,0,1).

Los gradientes o degradados de color en principio debiera ser aplicable allí donde se pueda utilizar un color, pero en la práctica su uso se reduce a los fondos.