Opciones para el Background (fondo) de tu web

Una de las propiedades de las paginas webs mas importantes es el fondo, a partir de este articulo te voy a mostrar como configurar el mismo con todas las propiedades posibles utilizando hojas de estilo (CSS).

Primero que nada debemos saber que el elemento en la hoja de estilo al que debemos agregarle las propiedades de nuesto fondo es al “body”. Primero vamos a hacer uno muy simple con colores hexadecimales.

body {
 
background-color: #000000;
 
}

Muy simple ah??…simplemente colocamos la palabra background-color y agregamos el color que en este caso es negro.

Vamos ahora a hacer algo un poco mas complejo, vamos a configurar nuestro fondo de manera que tenga una imagen y un color.

body {
 
background-color: #000000;
 
background-image: url(tu_imagen.png);
 
}

Todo parece muy facil ah??..simplemente escribimos background-image, seguido de la palabra url y luego la ubicacion de nuestra imagen.

Nos preguntaremos ahora, como hacemos si nuestra imagen de fondo es muy pequeña y queremos que se repita indefinidamente??

Para eso te voy a dar una imagen de ejemplo que quizas te ayude a entender mejor el codigo que va a continuacion.

repbackground

Vemos las tres propiedades mas usadas en la repeticion del background, todo depende de la imagen que tengas, en este caso es una simple con tres rectangulos (la que esta en el 3er cuadro con no-repeat), como podemos ver el repeat que mas se acopla a lo que queremos es el cuadro 1.

body {
 
background-color: #000000;
 
background-image: url(tu_imagen.png);
 
background-repeat: repeat-x;
 
}

Es facil eh?

Ahora, en muchas paginas que tienen marcos flotantes no se quiere que el fondo se mueva, es decir, que cuando se mueva el contenido, la imagen de fondo se quede estatica, veamos como lo logramos.

body {
 
background-color: #000000;
 
background-image: url(tu_imagen.png);
 
background-repeat: repeat-x;
 
background-attachment: fixed;
 
}

Listo!!, con la propiedad attachment logramos este efecto.

Ahora….queremos que nuestro fondo este ubicado en un lugar en especifico de la pagina, vamos a lograr esto con la propiedad bakground-position, veamos.

body {
 
background-color: #000000;
 
background-image: url(tu_imagen.png);
 
background-repeat: repeat-x;
 
background-attachment: fixed;
 
background-position:bottom;
 
}

Listo, nuestro fondo se va a colocar en el piso de nuestra pagina web, la propiedad background-position puede tener muchos valores (top, bottom, left, rigth, center) o incluso si ninguna de estas opciones cuadra tu fondo donde quieres, puedes agregar un numero especifico en porcentaje, (un porcentaje para el alto y otro para el lado).

body {
 
background-position: 52% 36%;
 
}

El primer porcentaje es para el alto, y el segundo para la ubicacion lateral.

Ahora llega lo mejor, algo creado para los flojos a los que no nos gusta escribir tantas veces la palabra “background-etc”, podemos colocar todas las propiedades mostradas arriba en una sola linea, mira lo bueno que es.

1
2
3

body {
background: #000000 url(FKLDKDFL.png) repeat-x fixed 56% 36%;
}

que bien ah?, pues ahora no tienes excusas para no tener un fondo a la perfeccion, que esperas para aplicar estos efectos en tu pagina?.

Mijael es el creador y editor de skyandstars.net donde publica guias y tutoriales sobre WordPress, Cutenews, PHP, HTML y mucho más. Acutalmente estudiante universitario.

Mijael166