feed twitter facebook LinkedIn facebook

CSS » Fondo estático en una página web

marzo 11, 2007 por Víctor Cuervo 145 Comentarios Imprimir Imprimir

A la hora de diseñar una página web podemos hacer que el fondo de dicha pagina web quede estático, independientemente del scroll que el usuario realice sobre dicha página.

Esto nos será útil en muchos casos, por ejemplo cuando queramos tener de fondo un escudo, un logo,... Hay que tener en cuenta que si ponemos una imagen de fondo, por defecto, el fondo, se repetirá tantas veces como extensa sea la página web.

Para poder fijar el fondo nos basaremos en el atributo CSS background. El primer atributo que debemos conocer es background-image. Este atributo nos permite especificar la imagen que se va a poner en el fondo de la página web.

De esta forma el código a utilizar será el siguiente:

<style>
body {
  background-image: url('http://lineadecodigo.com/wp-content/uploads/2006/12/w3c.jpg');
}
</style>

Utilizaremos la función url() para hacer referencia al archivo a utilizar.

Una vez que tenemos puesta la imagen en el fondo veamos como fijarla. Para ello utilizamos otros dos atributos:

  • background-repeat, el cual indica como se va a repetir la imagen en el fondo, si verticalmente, horizontalmente, en ambos sentidos o directamente no se va a repetir (valor no-repeat). Este último, será nuestro caso.
  • background-attachment, mediante este atributo indicaremos si la imagen se va a quedar fija (fixed) o hará scroll con el resto de la página (scroll).

Finalmente el código quedará de la siguiente forma:

<style>
body 
{
background-image: url('http://lineadecodigo.com/wp-content/uploads/2006/12/w3c.jpg');
background-repeat: no-repeat;
background-attachment: fixed
}
</style>

Visualizar el ejemplo | Descargar el código

Foro sobre CSS
Foro sobre CSS
tags: , , , , , , ,

Artículos relacionados:

145 comentarios »

RSS feed para los comentarios de esta entrada. TrackBack URI

1 2 3 15
  1. Juda Alejandro
    abril 27, 2007 #

    hola, este codigo esta super, me ayudo muchisimo, lo que ocurria es que tenia para mi web un fondo que no servia para mosaico, pero este codigo esta super super, hasta la vista mis chinos

  2. jorge
    abril 27, 2007 #

    hola men… sabes si me func este tuto es rebueno ok pero necesito un favor cualdo le coloco al hi5 no me funciona…
    weno yo le puse en…
    editar luego personalizar…
    y en la ultima parte de abajo
    dice url de la imagen de fondo y
    mas abajito “estilo”

    weno en url puse la url d la imagen ok
    y en estilo tus codigos oviamente cambiando la url que habia por la que yo tenia ok puse no repeat y tbm en fixed
    pero = me salia la imagen y se movia junto con el scroll ok
    asi que ayudame pls
    necesito fijar la imagen si puedes por favor me mandas un email con la ayuda pls la necesito
    ah y no es que no se pueda por que ya vi varios hi5′s con imagenes estaticas ;) te agradesco de antemano bye men

    mi mail es hackergun@hotmail.com

  3. carlos oviedo
    abril 29, 2007 #

    presisamente yo quise hacer lo mismo en hi5, pero la caja de texto en donde se edita la URL de fondo tiene restriccion de caracteres, por tal motivo no se puede manualmente. se que existe webs que te pimpean el blog, recomiendo buscar uno para arreglar el diseño de hi5.

  4. andres
    mayo 15, 2007 #

    hey yo puse ese codigo y no me sale la nada, solo aparece la imagen cargandose y desaparece y queda un fondo blanco. ese problema tambien lo tengo con otros estilos, solo aparece el estilo cargandose y desaparece y ese fondo blanco como que cubre el estilo poruq si me voy al pie de la pagina aparece un pedacito.
    porfa ayudenme se lo suplico porque ya estoy aburrido de que la imafgen se repita varias veces y quiero que mi pagina se mire cool
    poooooooooooooorfaaaaaaaaaaaaaa se lo suplico.

  5. lineadecodigo
    mayo 15, 2007 #

    Andres, vamos a ver si te puedo ayudar. Mándame la página HTML a mi dirección de e-mail contacto(arroba)lineadecodigo.com

    Y veremos que podemos hacer. Luego comentamos la solución por aquí, por si le pasa a alguien más.

  6. idevi
    mayo 16, 2007 #

    Hola tengo una duda,como puedo hacer q el cotnenido de mi pag webse mueva y q el fondo se quede estatico,ayudame por favor ,gracias.

  7. jose
    mayo 30, 2007 #

    hola amigos me gustaria que me ayudaran com mi perfil lo q pasa es yo e editado mi URL q es http://salasjls.hi5.com y al momento de ingresar para ver mi perfil me aparece en blanco, tampoco puedo ingresar a editar mi perfil no se que pasa ya intente de todo no se que hacer.. espero su respuesta mi correo de mi Hi5 es josel_843@hotmail.com gracias…..

  8. Alejandro
    junio 1, 2007 #

    hola men… sabes si me func este tuto es rebueno ok pero necesito un favor cualdo le coloco al hi5 no me funciona…
    weno yo le puse en…
    editar luego personalizar…
    y en la ultima parte de abajo
    dice url de la imagen de fondo y
    mas abajito “estilo”

    weno en url puse la url d la imagen ok
    y en estilo tus codigos oviamente cambiando la url que habia por la que yo tenia ok puse no repeat y tbm en fixed
    pero = me salia la imagen y se movia junto con el scroll ok
    asi que ayudame pls
    necesito fijar la imagen si puedes por favor me mandas un email con la ayuda pls la necesito
    ah y no es que no se pueda por que ya vi varios hi5’s con imagenes estaticas te agradesco de antemano bye men

    mi mail es jimalej@hotmail.com

  9. lineadecodigo
    junio 2, 2007 #

    He publicado una entrada que explica como hacer el fondo estático en hi5.com. Espero que os sea de ayuda.

    Podéis leerla en Fondo de pantalla estático en Hi5.com

  10. Stefany
    junio 6, 2007 #

    http://lineadecodigo.com/2007/06/02/fondo-de-pantalla-estatico-en-hi5com/
    Vayan aca, pude poner mi fondo estatico en mi hi5!

1 2 3 15

Deja un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*