Fondo en CSS

Las instrucciones CSS son, por consenso, escritas una línea tras otra, separando cada instrucción de la otra con un punto y coma, y cada conjunto de instrucciones con una llave. En esta página, aprenderás a escribir CSS que afecte el fondo de una página.

Las instrucciones de fondo son:

background-color
background-image
background-attachment
repeat
background-position
background

Con background-color se especifica el color de fondo de un marcador específico; con background-image se especifica el nombre del archivo que servirá como imagen de fondo en la página web; con background-position se especifica las posiciones horizontal y vertical en la que la imagen de fondo estará; con background-attachment se especifica si la imagen de fondo correrá con el resto de la página o si permanecerá fija en el sitio indicado; y con repeat se especifica si el navegador debe reproducir la imagen o no. por último, con background se especifican todas estas condiciones en forma abreviada.

Opciones de fondo en CSS

background-color acepta nombres de colores como silver o maroon, valores rgb tales como rgb(0,0,0) o valores hexadecimales como #fff. Para Heptagrama, por ejemplo, elegimos este valor:

background-color: #682468;

background-image acepta el nombre de un archivo, únicamente. Necesita escribirse entre paréntesis, así:

background-image: url(image.jpg);

background-attachment normalmente considera solo fixed (fijo) o scroll (corredizo) como valores:

background-attachment: fixed;

repeat acepta cuatro alternativas: repeat hará un mosaico indefinido con la imagen de fondo; repeat-x la repetirá horizontalmente; repeat-y, verticalmente; y no-repeat la mostrará solo una vez.

repeat: no-repeat;

background-position normalmente trabaja mejor cuando se usan porcentajes o las palabras top, bottom, left, right. Por supuesto, se pueden utilizar otras medidas:

background-position: bottom right;

Ejemplos

Si, por ejemplo, se quiere tener un fondo blanco con un logotipo en la esquina inferior derecha de la página web, lo que hay que escribir es lo siguiente:

body {
background-color: white;
background-image: url(tulogo.gif);
background-attachment: fixed;
repeat: no-repeat;
background-position: bottom right;
}

De la misma forma, si se desea que todo texto que se enfatice tenga un fondo amarillo claro, como cuando se usa un resaltador, se puede hacer fácilmente, así:

em {
background-color: #ffffcc;
}

Como ves, puedes usar solamente las instrucciones CSS que necesites.

Contracción

Por consenso, se pueden evitar escribir las cinco instrucciones que vimos arriba para los fondos de forma abreviada. Para esto se usa background, así:

background: white url(tulogo.gif) fixed no-repeat bottom right;

Sin embargo, debes saber que si utilizas esta contracción, necesitas especificar todos los elementos y en el mismo orden: background-color, background-image, background-attachment, repeat, background-position; caso contrario, corres el riesgo de que no funcione adecuadamente.


Conocimiento + Computadores