Para definir un fondo de página, solo debemos aplicar algunas
propiedades a la etiqueta nativa de HTML, llamada <body>. El
<body>, como ya comenté en otros artículos, es una etiqueta que NO
definimos nosotros, sino que ya viene definida por defecto. Solo
cambiamos los valores de sus propiedades.
Lo que tenemos que hacer para aplicar los fondos html es ingresar en nuestro código del archivo CSS, lo siguiente:
body {
propiedad: valor;
}
Las propiedades que usaremos para los fondos, serán :
background-color:
Define el color del fondo. Se le asigna el código hexadecimal del color elegido, por ej: #ff0000 (rojo)
background-image url(nombre_de_imagen.jpg):
Define la imagen de fondo. Se le asigna el camino y nombre del archivo de imagen para el fondo.
background-repeat:
Define como se repetirá o no, la imagen en nuestro fondo.
Se le puede asignar:
repeat (para repetir la imagen horizontal y verticalmente)
repeat-x (para repetir la imagen horizontalmente)
repeat-y (para repetir la imagen verticalmente)
no-repeat (para no repetir la imagen, solo se aplica una sola vez ubicándola arriba a la izquierda)
background-attachment:
Determina si el fondo quedará fijo o no, cuando hagamos scroll en nuestro navegador.
Se le puede asignar:
fixed (fijo, sin scroll)
scroll (con scroll)
background-position:
Determina donde se colocará la imagen de fondo. Si no hay valores, por
defecto se coloca arriba a la izquierda. Si le asignamos valores en
pixeles, su origen se desplazará a los pixeles que le asignemos, primero
en el eje horizontal y luego el vertical.
Ej:
background-position: 10px 10px;
(10 px a la derecha, y 10 px hacia abajo)
EJEMPLOS
Entonces, vamos a ver los diferentes códigos CSS que usaríamos para cada uno de los 3 tipos de fondos que nombré arriba:
Fondo Liso (definimos solo un color de fondo):
body {
background-color: #ff0000;
}
Fondo Unico (se define la imagen de fondo, y se le asigna no repetirla):
body {
background-image: url(fondo_pantalla.jpg);
background-repeat: no-repeat;
}
Fondo de Mosaico o Patterns (se define una imagen y se asigna repetirla horizontal y verticalmente:
body {
background-image: url(fondo_pantalla.jpg);
background-repeat: repeat;
}
Te aconsejo que aunque tengas un fondo fijo o de mosaico, siempre
definas un color de fondo para tu pagina que sea similar al predominante
de la imagen. Asi, si el fondo tarda en cargar, el usuario puede ver un
color parecido al de la imagen.
Te propongo que practiques definiendo diferentes tipos de fondos html
para tus paginas, y combinando las diferentes propiedades y valores.
No hay comentarios.:
Publicar un comentario