Puede configurar sus fondos para que sean imágenes, si lo prefiere. La propiedad CSS para usar es imagen de fondo . Para el valor, se especifica la ubicación de tu imagen. Esto va entre paréntesis redondos y después de la palabra url. La imagen el nombre está rodeado de comillas simples:

CUERPO {

imagen de fondo: url($0027mi_imagen.gif$0027);

}

Las mismas reglas sobre la referenciación de imágenes que aprendiste antes se aplican aquí. Lo anterior por lo tanto, hace referencia a una imagen en la misma carpeta que la página web actual. Podrías colocar tus imágenes de fondo en una carpeta llamada fondos . El código sería entonces:

CUERPO {

background-image: url($0027backgrounds/my_image.gif$0027);

}

El valor predeterminado para las imágenes de fondo es que se repitan. Por ejemplo, si su imagen de fondo es de 100 por 100 pixeles esta imagen será copiada hasta que toda la pantalla se llene. Esta baldosa puede verse horrible. La imagen abajo muestra esto:

Imágenes de fondo y posiciones de fondo

La imagen de fondo que usamos arriba era un gradiente de 200 por 200. Parece que está bien ir de izquierda a derecha (la dirección X). Pero bajando (en la dirección Y) la ¡Los azulejos se ven terribles!

Para darle más control de la baldosa de fondo, la propiedad CSS background-repeat se utiliza. La propiedad puede tomar cuatro valores: (etiqueta_13) repeat , (etiqueta_13) repeat-x , repeat-y , y no-repeat . Para nuestro gradiente de arriba, queremos que sólo azulejos de izquierda a derecha, en la dirección X. Así que necesitamos la repetición de la X:

CUERPO {

background-image: url($0027backgrounds/my_image.gif$0027);
fondo-repetición: repetición-x;

}

Nuestro fondo se vería entonces así:

Imágenes de fondo y posiciones de fondo

¡Que es muy superior!

Posición de fondo

Puede especificar una posición para las imágenes de fondo. Para ello la propiedad CSS se utiliza la posición de fondo. Esta propiedad toma los siguientes valores:

arriba a la izquierda
arriba centro
Arriba a la derecha. centro izquierda
centro centro
centro derecha
abajo a la izquierda
centro inferior
abajo a la derecha

Pero también puedes usar píxeles con valores X e Y. También es posible usar un porcentaje de páginas. Como un ejemplo práctico, supongamos que quieres un logo en el arriba a la derecha de tu página. Podrías hacerlo así:

CUERPO {

imagen de fondo: url($0027backgrounds/logo_brolly.gif$0027);
posición de fondo: arriba a la derecha;
antecedentes-repetición: no repetición;

}

El efecto sería este:

Imágenes de fondo y posiciones de fondo

Fíjese que hemos utilizado la repetición de fondo con un valor de no repetición, de lo contrario ...¡tendríamos una página llena de brollies!

Aquí hay algunos ejemplos de los otros valores que puede utilizar:

posición de fondo: 300px 100px;

posición de fondo: 80% 0%;

Con los valores de los píxeles (px) la dirección X es la primera, seguida por la dirección Y. Un espacio separa las dos. Lo mismo ocurre con los valores de porcentaje: La dirección X primero, luego la dirección Y, un espacio como separador.

Pruébelos usted mismo. Encontrarás las imágenes de fondo en los archivos extra que venía con este curso, en la carpeta extra_files/backgrounds . (Si no tienes los archivos extra aún, la ubicación de la descarga está aquí, bajo el heading Diseño Web - Nuevo Curso : Descargar los archivos extra necesarios para este curso (No necesitas las descargas para el viejo curso.)

En la próxima lección, aprenderás sobre los pies de foto.

|

Recomendado para ti