CSS » Fondo estático en una página web
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://img.aulambra.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://img.aulambra.com/wp-content/uploads/2006/12/w3c.jpg');
background-repeat: no-repeat;
background-attachment: fixed
}
</style>
 Foro sobre CSS |
Artículos relacionados:
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
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
te agradesco de antemano bye men
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
mi mail es hackergun@hotmail.com
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.
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.
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.
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.
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…..
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
Junio 2, 2007 #
[...] Muchas personas me han enviado correos preguntándome como podían dejar fijo el fondo de pantalla en hi5.com. Sobre todo porque habían seguido el ejemplo “Fondo estático en una página web” y no les había funcionado. (también podéis ver los comentarios al artículo que hablan sobre el tema). [...]
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