Poner un fondo en mi página web

28/May/2011 CSS 3 Comentarios

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 es background. 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 elemento body.

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:

  1. <style type="text/css">
  2. body {
  3. background:url(fondo.gif) repeat 0 0;
  4. }
  5. </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:

  1. <style type="text/css">
  2. body {
  3. background:url('/imagenes/fondo.gif') repeat 0 0;
  4. }
  5. </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:

  1. <style type="text/css">
  2. body {
  3. background-image:url('/imagenes/fondo.gif');
  4. }
  5. </style>

Vídeos sobre CSS


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

3 comentarios en “Poner un fondo en mi página web”

Víctor Cuervo

javier perez

visiten youtube.com/(fraudeinmobiliario)videos num.5 y 6 en total son trece…quien se habra equivocado en la regularizacion del predio y autorizacion

Víctor Cuervo

javier perez

gracias por las instrucciones de aprendizaje..desde el cerro de la silla reciban un cordial saludo

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*