Manual 82

Poner un fondo en mi página web

Cuando estamos diseñando una web una de las cosas que siempre vamos a necesitar es saber como poner un fondo en nuestras páginas web.

Aunque tiempo atrás esto era una tarea que se podía hacer en HTML, desde que se separo HTML para la estructura y CSS para el diseño, fue este segundo lenguaje, el CSS, el que se quedó encargado de tener la capacidad para poner un fondo en una página web.

El atributo de CSS que nos permite poner el fondo de la página web esbackground. Dicho elemento se puede aplicar al fondo de diferentes elementos. Si bien, si queremos utilizar para poner el fondo de la página web, lo tendremos que utilizar sobre el elementobody.

La estructura del elemento background es la siguiente:

background: [color] [image] [repeat] [attachment] [position];

Es decir, podemos indicarle un color RGB, una imagen, podemos indicar cómo se repite o si no se repite. Con attachment podemos indicar si se queda fijo o en formato scroll y por último podremos indicar la posición inicial en la que se situará la imagen.

Lo mejor que puedes hacer es leerte la documentación sobre el elemento background.

Así, nuestro código CSS quedará de la siguiente forma:

<style type="text/css">


body {  


        background:url(fondo.gif) repeat 0 0;                   


 }


</style>

Hay que recordar que este código lo tenemos que poner antes de la etiqueta head.

Otra de la cosas que hay que fijarse en el código es que utilizamos la función url() para indicar el directorio dónde se encuentra la imagen. En nuestro caso la página que diseñamos para ponerle en fondo de mi web está en el mismo directorio que la imagen. Si bien, si queremos utilizar otro directorio podemos poner lo siguiente:

<style type="text/css">


body {  


        background:url('/imagenes/fondo.gif') repeat 0 0;                   


 }


</style>

Ahora la imagen se encuentra en un directorio llamados "imagenes" que está en la raiz.

Por último tenemos que saber que existe otra propiedad llamada background-image, la cual nos permite solo indicar la imagen a utilizar como fondo de mi página web, si no nos queremos preocupar del resto de atributos.

En este caso el código quedaría de la siguiente forma:

<style type="text/css">


body {  


        background-image:url('/imagenes/fondo.gif');


 }


</style>



http://lineadecodigo.com/css/poner-un-fondo-en-mi-pagina-web/