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:
Julio 5, 2007 #
Hola como estan, tengo el mismo problema q muchos. un dia estuve modificando mi perfil y poniendole varias cosas en esas paginas y de pronto no podia ver el pèrfil, ahora ese problema se soluciono, pero cuando kiero modificar o agrgar algo a mi perfil, me sale error en la pagina, AYUDENME PORFAVOR COMO HAGO PA SOLUCIONAR ESTO????
Marissa
Julio 6, 2007 #
gracias……pura vida…!!!!
Julio 6, 2007 #
yo tambien tengo en mismo problema sale esto cada ves q entro a mihi5
¡Ups! No pudimos cumplir con tu solicitud.
Una disculpa por el inconveniente, pero tuvimos un error al cumplir con tu solicitud.
Regresar al Inicio o haz clic en el botón Regresar de tu navegador para regresar a la página donde estabas.
=/ y ya entre a esa pag q dio liliana =/ pe ya modifik todo y nada
=(.-.. q kuedo hacer =/ ay les dejo mi msn cualkier ayudita….anai_sandra_18@,,
Julio 6, 2007 #
Hola, quisiera que me ayuden por error quise modificar mi perfil y cuando lo hice aparecio una pagina en blanco, no puedo editar, ni ver el perfil tampoco mis amigos… Por favor ayudenme… mi correo es emli318@hotmail.com
Julio 13, 2007 #
olax!! quiero q’ me den paginas para poder arreglar mi hi5 por q’ me faltan mas paginas para poder hcer y pa q’ quede bien piola jaja okis bye ps
Julio 14, 2007 #
hey men visto k nadi dice komo poner un fondo estatiko x aki,,se botan o k a k pasa loko es mas facil k la tabla del 1 hey men akie sta el codigo :
.bg_content, .heading_profile { background-color: transparent !important; background-image:none important; background-repeat: no-repeat; } body { background-color: #000000; background-position: topcenter; background-repeat: no-repeat; background-image: url(aki pones la url de la imagen de fondo); background-attachment: fixed; } #p_center{ background-color: transparent !important; background-image:none; background-attachment:fixed; background-position: center center; background-repeat: no-repeat; } #p_container { background-color: transparent !important;}
OJO::::::::alli hay un parte dond dice pagina web del fondo ,pues alli pones la url d la imagen de fondo ok y asi
se keda statiko y esto va pa todos especila mente pa linea de codigo k su otro codigo si me funciono ok gracias men ,,usenlo y cuankier vaina me pasan la voz:
nakito_cool@hotmail.com
ya tu sabe desde LIMA-PERU
Julio 14, 2007 #
weno ojala y le funciones men me kito chaufa ya sab kualkier vaina me pasan la voz noma y si res yal mjol
Julio 15, 2007 #
ayuda trate de arreglar mi profile en el hi5 y termine poniendo un codigo q no era y ahora esta en blanco por favor ayudenme a q se vea de nuevo.
gracias
Julio 18, 2007 #
hola quiero quitar eso de las escuelas ase poco puse el nombre de mi ex escuelas ahora lo kiero kitar como lo hago plisssssssssssss diganmeeeeeeeeeeeeeeeee
Julio 18, 2007 #
mi hi5 no se puede editar ya que puse un codigo mal y todo sale blanco haber si alguien me dice como solucionar este problema se los agradeceria muxo
grax