Con la finalidad de exponer de forma atractiva la
información de una página web,
implementaremos las propiedades de fondos en documentos CSS.
Algunos creadores de páginas web,
por desconocimiento de la ubicación exacta de la imagen en un fondo, se
resignan a utilizar imágenes simples o a pasar largas horas editándolas. Por lo
tanto, conoceremos los diferentes valores disponibles para la propiedad background.
La propiedad background de CSS, tiene diferentes atributos con el fin de ser
específicos en el diseño de fondos:
- Color: es para definir el color en cualquiera de las posibilidades
brindadas por CSS.
- Image: para definir la ubicación de la imagen.
- Repeat: para especificar si se repite el fondo de imagen y de qué
forma.
- Position: para definir la posición exacta del fondo.
- Attachment: para especificar la imagen en una posición según la vista
del usuario.
061-01_0706_ilu01.
Propiedades de background
En la imagen siguiente observamos las dos primeras
propiedades definidas.
061-01_0706_ilu02.
Propiedad de imagen y color de background
Con la primera etiqueta div, especificamos el
color púrpura en hexadecimal, y la segunda,
se encuentra una imagen. En este caso, la imagen está al lado del documento
CSS, motivo por el cual la url es
corta.
Para la repetición de imagen en el
fondo, utilizamos repeat-y para
duplicar las veces necesarias hasta completar de forma vertical la caja CSS. En
el caso de ser horizontal, cambiamos a repeat-x.
En código de la siguiente ilustración, la divisón dos tiene como valor no-repeat,
debido a ello solo es mostrado un logo.
061-01_0706_ilu03.
Propiedad de repetición de background
Con respecto a la posición de un
fondo, es posible utilizar un número para definir exactamente la ubicación, o
también definir left, center, right, top y bottom. En el ejemplo de la siguiente
ilustración, tenemos la primera divisón con una posición en center, y la segunda división top y
right, corespondientes a arriba y a la izquierda en español.
061-01_0706_ilu04.
Propiedad de posición de background
Para fijar un fondo, utilizamos
como valor scroll. De esta forma al
mover el elemento el fondo queda fijo y todo desaparece al bajar la ventana. Al
utilizar fixed, el fondo se mantiene fijo, independientemente de subir o bajar la
ventana. Cuando se especifica local, el fondo se mueve solo dentro del
elemento donde fue definido.
061-01_0706_ilu05.
Propiedad de movimiento de background
Keynotes
- La propiedad background de CSS, tiene diferentes atributos con el fin de ser
específicos en el diseño de fondos.
- Para la repetición de imagen en el fondo,
utilizamos repeat-y para duplicar las
veces necesarias hasta completar de forma vertical la caja CSS. En el caso de
ser horizontal, cambiamos a repeat-x.
- Con respecto a la posición de un fondo, es
posible utilizar un número para definir exactamente la ubicación, o también
definir left, center, right, top y bottom.
- Para fijar un fondo, utilizamos como valor scroll. De esta forma al mover el
elemento el fondo queda fijo y todo desaparece al bajar la ventana. Al utilizar
fixed, el fondo se mantiene fijo, independientemente de subir o bajar la
ventana.
RetoAplicar tres propiedades diferentes
en la definición de fondos en un documento CSS. Es necesario captar la atención
del usuario y para ello pide opinión a cinco compañeros.
¡Comparte el resultado final del
reto en tu vBox!
Tiempo disponible: entre 15 y 30
minutos.
CierreA través de la implementación de propiedades de
fondos en documentos CSS, ubicamos con exactitud las imágenes utilizadas como fondo, por lo tanto,
optimizamos tiempo en la creación de páginas web y exponemos de forma atractiva todo
tipo de información. Al aplicar lo aprendido en el video con creatividad y
organización, crearemos proyectos vistosos para internet.
