Estilos>>Fondos
Con la propiedad fondo podemos controlar el color de fondo un elemento de la página, establecer imágenes como fondo y decidir su posición dentro de la página y si se repetirán o no. En el editor de CSS de N|VU podrás acceder a estas propiedades dentro de la pestaña .
Propiedad: background-color
Como todas las propiedades de los fondos podemos aplicarla a toda la página o sólo a un determinado elemento, elgiendo una etiqueta de html como selector para aplicarlo de forma genérica o bien mediante la utilización de clases o selectores id.
Valores: podemos utilizar el nombre o la referencia RGB de un color .
Ejemplos:
En este párrafo se ha aplicado un fondo utilizando la etiqueta background-color:orange
| Cabecera |
Cabecera
|
|---|---|
| celda 1 |
celda 2
|
Esta tabla toma su color de un estilo definido en una hoja interna para el elemento th
<style type="text/css">
<!--
th {background-color: #aabc35}
-->
</style>
Propiedad: background-image
Valores: podemos utilizar la referencia relativa a una imagen de nuestro propio sitio o bien una referencia absoluta. Con ello podemos hacer que los fondos se apliquen solamente a una determinada porción del documento, en lugar de hacerlo a toda la página. Aunque no deberíamos hacerlo, incluso aunque tuviéramos control sobre la url a la que apuntamos, si usamos referencias absolutas de imágenes en la red solo podremos comprobar el efecto cuando dispongamos de conexión a internet.
Ejemplos:
Ahora
se
ha utilizado una imagen como fondo y la forma de expresarlo ha sido background-image:URL(../imagenes/claro09.jpg)
La inclusión de una imagen como fondo lleva asociadas tres propiedades que nos permitirán especificar si la imagen se repite, la posición en caso de no repetirse y el desplazamiento vertical si la página ocupa más de una pantalla.
Propiedad: background-position
Valores: Existen varias posibilidades para establecer la posición:
top, center
y bottom
(para arriba, centro y abajo respectivamente) y left,
center y right
para indicar la posición horizontal. (izquierda, centro y
derecha). En caso de utilizar un único término no
habrá duda ya que son diferentes salvo en el caso de center
que provocará que el navegador lo interprete como center
center y sitúe la imagen en el medio absoluto de la
página. Ver
ejemploN|VU no dispone de una opción para especificar esta propiedad en el editor de CSS, por lo que habrá que incorporarla manualmente en el código de la página o en el archivo de hoja de estilos.
Propiedad: background-repeat
Valores: Si no especificamos
esta propiedad se adoptará el valor por defecto repeat.
Podemos también optar por indicar que no se repita con el
valor no-repeat (en
los ejemplos de
posicionamiento se ha utilizado ya esta propiedad) o bien indicar que
queremos que se repita en horizontal repeat-x
o en vertical repeat-y. Ver
ejemplo
Podemos indicar si deseamos que la imagen de fondo se desplace con el resto de la página cuando esta ocupe más de una pantalla o si deseamos que permanezca fija, a modo de "marca de agua", mientras se desplaza el resto del contenido.
Propiedad: background-attachment
Valores: el valor por defecto es
scroll, mientras que si utilizamos fixed
la imagen permanecerá fija. Ver
ejemplo
