Hacker of the Web
Tus ideas en código!...y mas

Propiedades del Fondo (Background) en CSS

El código en CSS(Hoja de estilos en cascada), es bastante interesante, los bordes en CSS son bastantes sencillos de manipular y además le dan un aspecto mas personalizado al web/blog.

Existen varias opciones para colocar un fondo en alguna página en específico, la primera es en la que se introducen todos los datos en una misma linea:

En CSS:
background:{imagen}{repeticion}{posicion}{fijacion}{color};

En JavaScript:
background="{imagen}{repeticion}{posicion}{fijacion}{color}";


Un ejemplo:
background:url(http://www.blogger.com/img/icon_logo32.gif) no-repeat top left fixed blue;


La segunda es colocar de manera separada las propiedades del fondo:
En CSS:
background-color: {color};
background-image: {imagen};
background-repeat: {repeticion};
background-attachment: {fijacion};
background-position: {posicion};

En JavaScript:
backgroundColor="{color}";
backgroundImage="{imagen}";
backgroundRepeat="{repeticion}";
backgroundAttachment="{fijacion}";
backgroundPosition="{posicion}";


La propiedad:
Imagen, esta será la imagen que cubrirá parte o el total del objeto especificado. Se puede definir de la siguiente manera:
url( URL DE LA IMAGEN )

Un ejemplo:
url(http://www.blogger.com/img/icon_logo32.gif)


Posicion, básicamente esta propiedad es una propiedad de la propiedad imagen, es decir, no sirve de nada si no se ha especificado una imagen de fondo al objeto. Tiene seis opciones que se pueden combinar entre sí, las cuales son:
Alineacion Horizontal:
left (izquierda)
right (derecha)
center (centro)

Alineacion Vertical:
top (arriba)
bottom (abajo)
center (centro)

Pero cabe rescatar que la primer palabra debe ser la especificación de la posición vertical y la segunda debe ser la horizontal:
top right


Repeticion, esta propiedad tambien es una propiedad de la propiedad imagen, así que no servirá de nada que la coloques si no has especificado alguna imagen de fondo, esta propiedad tiene tres opciones:
repeat-y (Repetir verticalmente)
repeat-x (Repetir horizontalmente)
no-repeat (No repetir)

Un ejemplo:
repeat-x


Fijacion, esta propiedad es la ultima de las propiedades de la propiedad imagen y no sirve sin especificar alguna imagen de fondo antes, esta propiedad tiene solo dos opciones:
scroll (desplazamiento).-La imagen de fondo se mueve cuando el resto de la barra de desplazamiento se desplaza
fixed (fijada).-La imagen de fondo no se mueve cuando la barra de desplazamiento se desplaza

Un ejemplo:
fixed


Color, se define como el color que cubrirá el fondo total de algún objeto y si existe una imagen de fondo este color estará por debajo de la imagen. Los colores se pueden definir en Ingles, Hexadecimal o en RGB.
Un ejemplo:
#CEFF99

Linea 0

Linea 1

Linea 2

Linea 3

Linea 4

Linea 5

Linea 6

Linea 7

Linea 8

Linea 9

Linea 10

Linea 11

Linea 12


Repeat


Position


Color


Attachment

#

Deja tu huella y comenta!

Hola!, por favor deja tus comentarios, te aseguro serán contestados, dudas, sugerencias, lo que sea!!!!!!!!!!.

Si el formulario no funciona, o quieres irte a la segura: agrega tu comentario de forma tradicional

Si necesitas ayuda mas personalizada deja un <a href='URL'>ENLACE</a> hacia tu blog.

Emoticons
Comenta con tu:
Comenta:

2 comentarios !

Clemen dijo...

¿Cómo puedo introducir una miniwiki como gadget y que funcione en el blog?

Unknown dijo...

Clemen , pues la verdad no se a que te refieres con una miniwiki xD.


Página Principal
Arriba