Las imágenes de fondo mediante el uso de CSS son bastante prácticas, ya que las reglas son bastante flexibles y permiten hacer bastantes cosas interesantes; incluso con la versión 2.1 de las hojas de estilo es posible crear efectos muy logrados, sólo hay que conocer lo básico sobre las imágenes de fondo y su aplicación dentro de las hojas de estilo en cascada.
Las propiedades básicas
Existen 5 propiedades inherentes al fondo de un elemento, las cuales se especifican en un archivo CSS o incluso dentro de un mismo documento HTML; estas propiedades son las siguientes:
- background-color: especifica el color de fondo (color sólido)
- background-image: especifica una imagen de fondo
- background-position: establece la posición de la imagen en el fondo
- background-repeat: determina si la imagen de fondo se debe repetir y en qué dirección
- background-attachment: determina si la imagen debe desplazarse con el fondo
A su vez se pueden usar otras reglas de espaciado y margen, como margin y padding, sin embargo hay que recordar que IE6 interpreta estas instrucciones de manera diferente, poniendo los márgenes fuera del elemento, al contrario de los navegadores modernos que colocan el margen dentro. Esto puede causar conflictos, así que hay que tomar medidas especiales, como el hack del modelo de la caja para IE6.
En Smashing Magazine han escrito un artículo muy educativo sobre el uso de la propiedad background en el contexto de las hojas de estilo, por lo que no está de más echarle un vistazo. Si quieres abundar más sobre el tema, también puedes visitar este apartado en w3schools, o si deseas usos alternativos/diferentes, no dejes pasar de largo este artículo en 24ways, un blog de referencia en el tema de las hojas de estilo.
