Con las siguientes reglas definimos el color de fondo para BODY
,
H1
y P
.
BODY {background-color: #99ff99} H1 {background-color: yellow } P {background-color: white }
Con las siguientes reglas vamos a usar la primer imagen como
fondo para BODY
y la segunda imagen para el fondo de H1
.
BODY {background-color: #FFCC33; background-image: url(bg-flecha.gif) } H1 {background-image: url(bg-tile2.gif) }
La imagen de la flecha usada para BODY
tiene zonas
transparentes, de modo que el color de fondo de Body
se ve a través
de esas zonas transparentes. Si cambiamos el color de fondo obtenemos otro efecto:
BODY { background-color: #CCCCCC; background-image: url(bg-flecha.gif) }
El valor inicial de "background-repeat
"
es "repeat
" por eso en los ejemplos anteriores la imagen
de fondo se repite en sentido horizontal y vertical formando un mosaico. Para
que la imagen se repita solamente en sentido horizontal debemos usar:
BODY { background-color: #CCCCCC; background-image: url(bg-flecha.gif); background-repeat: repeat-x; }
Para que la imagen se repita solamente en sentido vertical debemos usar:
BODY { background-color: #CCCCCC; background-image: url(bg-flecha.gif); background-repeat: repeat-y; }
Finalmente, para que la imagen aparezca solamente una vez debemos usar:
BODY { background-color: #CCCCCC; background-image: url(bg-flecha.gif); background-repeat: no-repeat; }
Habiendo especificado una imagen de fondo, podemos hacer que el mismo permanezca fijo cuando se efectúa un desplazamiento en la página:
BODY { background-color: #FFCC33; background-image: url(bg-flecha.gif); background-attachment: fixed; }
Con la siguiente regla hacemos que el fondo se desplace junto con el contenido del documento:
BODY { background-color: #FFCC33; background-image: url(bg-flecha.gif); background-attachment: scroll; }