El último elemento que forma el box model es el fondo de la caja del
elemento. El fondo puede ser un color simple o una imagen. El fondo solamente
se visualiza en el área ocupada por el contenido y su relleno, ya que el color de
los bordes se controla directamente desde los bordes y las zonas de los
márgenes siempre son transparentes.
Para establecer un color o imagen de fondo en la página entera,
se debe establecer un fondo al elemento
<body>. Si se establece un fondo a la página, como el valor inicial
del fondo de los elementos es transparente, todos los elementos de la página se
visualizan con el mismo fondo a menos que algún elemento especifique su propio
fondo.
CSS define cinco propiedades para establecer el fondo de cada elemento
(
background-color, background-image, background-repeat, background-attachment, background-position) y otra propiedad de tipo "shorthand" (background).
La propiedad background-color permite mostrar un
color de fondo sólido en la caja de un elemento. Esta propiedad no permite
crear degradados ni ningún otro efecto avanzado.
body {
background-color: #F5F5F5;
}
Para crear efectos
gráficos avanzados, es necesario utilizar la propiedad background-image, que permite mostrar una
imagen como fondo de la caja de cualquier elemento:
CSS permite
establecer de forma simultánea un color y una imagen de fondo. En este caso, la
imagen se muestra delante del color, por lo que solamente si la imagen contiene
zonas transparentes es posible ver el color de fondo.
El siguiente
ejemplo muestra una imagen como fondo de toda la página:
body { background-image: url("imagenes/fondo.png") }
Reglas CSS
body {
background-image:url(imagenes/fondo.gif);
}
Además de
seleccionar el tipo de repetición de las imágenes de fondo, CSS permite
controlar la posición de la imagen dentro del fondo del elemento mediante la
propiedad background-position.
La propiedad background-position permite indicar
la distancia que se desplaza la imagen de fondo respecto de su posición
original situada en la esquina superior izquierda.
Las reglas CSS
#caja1 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: bottom left;
}
#caja2 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: right top;
}
#caja3 {
background-image: url("images/help.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
<div id="caja1"><h1>bottom left</h1></div>
<div id="caja2"><h1>right top</h1></div>
<div id="caja3"><h1>50% 50%</h1></div>
Por último, CSS
define una propiedad de tipo "shorthand" para
indicar todas las propiedades de los colores e imágenes de fondo de forma
directa. La propiedad se denomina background y
es la que generalmente se utiliza para establecer las propiedades del fondo de
los elementos.
El orden en el que
se indican las propiedades es indiferente, aunque en general se sigue el
formato indicado de color, url de imagen, repetición y posición.
El siguiente
ejemplo muestra la ventaja de utilizar la propiedad background:
/* Color e imagen de fondo de la página mediante una propiedad shorthand
*/
body { background: #222d2d url(./graphics/colorstrip.gif) repeat-x 0 0; }
/* La propiedad shorthand anterior es equivalente a las siguientes
propiedades */
body {
background-color: #222d2d;
background-image: url("./graphics/colorstrip.gif");
background-repeat: repeat-x;
background-position: 0 0;
}
La propiedad background permite asignar todos o sólo
algunos de todos los valores que se pueden definir para los fondos de los
elementos:
background: url("./graphics/wide/bg-content-secondary.gif") repeat-y;
background: url("./graphics/wide/footer-content-secondary.gif") no-repeat bottom left;
background: transparent url("./graphics/navigation.gif") no-repeat 0 -27px;
background: none;
background: #293838 url("./graphics/icons/icon-permalink-big.gif") no-repeat center left;
x
0 Comentarios