Ir al contenido principal

Fondos (CSS)


Con CSS se puede personalizar los fondos de cada objeto de nuestra página, permitiendonos escojer el color de fondo, una imagen, la posición de la imagen, el comportamiento, y las repeticiones de la misma... 


Tabla de contenido


El color de fondo

El color de fondo se define usando el atributo background-color y un color RGB cómo valor.

000 
<div style="background-color: #ff0000;">ejemplo</div>




La imagen de fondo

Podemos definir un objeto con una imagen de fondo usando el atributo background-image y cómo valor una forma del estilo url(imagen.jpg), por ejemplo:

000 
<div style="background-image: url(imagen.gif);">ejemplo</div>




La posición del fondo

La imagen de fondo se puede aliniar a la parte superior, inferior.., para esto usaremos el atributo background-position, indicando uno o mas de los siguientes valores:
top - Aliniar en la parte superior
bottom - Aliniar en la parte inferior
center - Aliniar en el medio
left - Aliniar a la izquierda
right - Aliniar a la derecha 
Vamos a ver un ejemplo de imagen de fondo alineada en la parte superior derecha:

000 
<div style="background-position: top right;">ejemplo</div>




El comportamiento

El comportamiento de la imagen de fondo cuando usamos las barras de desplazamiento también se puede definir con el atributo background-attachment, que puede ser:
scroll - La imagen se mueve con el interior del objeto
fixed - La imagen no se mueve 
Podemos hacer que el fondo no se desplace al desplazar la página:

000 
<body style="background-image: url(bg_BG.gif); background-attachment: fixed">




Las repeticiones

Podemos hacer que la imagen de fondo se repita usando el atributo background-repeat:
repeat - La imagen se repite vertical y horizontalmente
repeat-x - La imagen se repite horizontalmente
repeat-y - La imagen se repite verticalmente
no-repeat - La imagen no se repite
Podemos hacer que el fondo no repita en la página:

000 
<body style="background-image: url(bg_BG.gif); background-repeat:no-repeat">




El atributo background

El atributo background es una mezcla de los cinco anteriores y nos permite usar todos sus posibles valores para definir los fondos de los elementos rapidamente:

000 
<body style="background: #ff0000 url(imagen.gif) repeat-x top fixed;">ejemplo</body>

Etiquetas:

Comentarios

Publicar un comentario

Entradas populares de este blog

Cómo desarrollar un algoritmo que permita botar la basura

Crear un algoritmo para botar la basura puede parecer sencillo, pero es una excelente manera de introducir conceptos de programación y automatización. A continuación, te presento un ejemplo de algoritmo en pseudocódigo, seguido de un artículo que explica su funcionamiento. Algoritmo en Pseudocódigo: Botar la Basura Inicio Si hay basura en el bote Si el bote está lleno Llevar el bote a la zona de recolección Fin Si Si es día de recolección Colocar el bote en la acera Fin Si Fin Si Fin Artículo: Automatizando la Tarea de Botar la Basura Introducción En la vida diaria, las tareas repetitivas como botar la basura pueden consumir tiempo valioso que podríamos dedicar a actividades más productivas o placenteras. La automatización de estas tareas mediante algoritmos no solo nos ahorra tiempo, sino que también nos permite introducir eficiencia y consistencia en nuestras rutinas diarias. El Algoritmo de Botar la Basura El algoritmo presentado es un conjunto de ins...
Publicar un comentario
Ver todo »

Compartir presentaciones en línea con SlideShare

Si eres de los usuarios que suelen trabajar en equipo, sabes de lo difícil que a veces resulta compartir la información relativa al trabajo que estamos realizando, muchas veces seguramente nos ha sucedido que a algunos miembros del equipo, o no les ha llegado la información, o directamente la han perdido. Y nuevamente debemos crear un correo, adjuntarles el archivo y esperar a que salga de la bandeja. Aburrido y cansador, sobre todo en el caso de las pesadas presentaciones.
Publicar un comentario
Ver todo »

Pasos Para Instalar Windows XP

Cuando nos hablan de instalar sistemas operativos, creemos que es muy difícil y que seguramente no seremos capaces de de hacerlo solos. Pues me he tomado a la tarea de realizar este pequeño tutorial para demostrarles paso a paso que no es tan complejo como parece. Para que se ahorren un buen dinerito a la hora de enfrentarse una instalación promovida por un daño en el disco duro o quizás por un virus informático.
Publicar un comentario
Ver todo »