CSS, HTML » Fondo de pantalla estático en hi5.com
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).
El código de "Fondo estático en una página web" no funciona con hi5.com debido a que está pensado para poder manipular una página sin restricciones o hecha enteramente por nosotros.
Si bien, hi5.com, nos deja modificar ciertas propiedades en la edición del perfil para poder conseguir que el fondo de la página se quede estático.
Los pasos son los siguientes:
Lo primero que tienes que hacer es acceder con tu usuario y contraseña dentro de hi5.com. Una vez dentro deberéis de ir a la opción "Personalizar mi Perfil".
Una vez dentro veras un formulario como el que sigue:
La la parte de personalización del perfil deberás de rellenar dos campos (aunque puedes personalizarte muchos más).
Por un lado URL de la imagen de fondo: donde tienes que indicar la URL de tu foto o imagen (en mi caso he puesto una foto de flickr.com) y por otro tienes que poner el siguiente código en Estilo
<style type='text/css'>.bg_content{background-repeat: no-repeat;
background-attachment: fixed;}</style>En este caso el elemento sobre el que se aplica el fondo fíjo es .bg_content y no .body
Quedando algo como lo que sigue:
Podéis comprobar el estado final en mi página http://lineadecodigo.hi5.com
Artículos relacionados:
Junio 5, 2007 #
Hola! gracias por la informacion me sirvio muchisimo solo queda un detalle y es q al parecer no funciona con Internet Explorer o al menos el 6.0 y se me hace extraño de resto si me sirve con el Opera y el Firefox
Aqui mi hi5 http://electronicpunk05.hi5.com
Saludos
Junio 6, 2007 #
Hola Andres,
La verdad es que si, que es curioso. Cargando tu página con Internet Explorer se produce una repetición de la imagen.
Supuestamente el código background-repeat: no-repeat; debería de evitar esta situación.
Compruébalo que está bien escrito, sino, pasanos el código que has utilizado para ver que puede estar pasando.
Junio 7, 2007 #
hola
Junio 7, 2007 #
necesito un fondo de pantalla para hi5
Junio 9, 2007 #
Es verdad, la imagen como fondo estatico, solo se ve bien con Mozilla Firefox, con Internet Explorer, la imagen se repite.
Junio 9, 2007 #
Pues en mi perfil no se repite. Supongo que será la versión del Internet Explorer. ¿Con qué versión de Internet Explorer lo estáis viendo?
Mirad a ver si se repite viendo mi perfil lineadecodigo.hi5.com. Yo tengo el código tal y como os puse en el artículo.
Junio 11, 2007 #
Yo puse una imagen que yo mismo cree y subi a internet, copee el cogido y puse el url de la pagina a donde subi la imagen, cuando entre a mi hi5 salia el fondo (y no se repite) el unico problema es que la imagen solo sale en la parte superior del hi5 y para la parte de abajo solo se ve el color de fondo de mi hi5 (que es negro)…
Me puedes decir que hice mal o es un problema con mi hi5??? (es que tengo un monton de codigos ya pegados, tal vez eso lo afecta) ???
Junio 11, 2007 #
Paolo, en realidad la imagen solo aparecerá una vez. Con el tamaño que tenga. Entiendo, que lo que tu quieres es que la imagen ocupe todo el fondo, independientemente del tamaño que tenga tu imagen.
¿Estoy en lo cierto?
Junio 15, 2007 #
Si, pero la imagen que puse es grande es de unos 1000 px de ancho por 900 px de alto… e igual no sale =(
es que acaso teno que poner una imagen mas pequeña???
Junio 15, 2007 #
Encontre este codigo y si funciona en el Internet Explorer, es:
.bg_content, .heading_profile { background-color: transparent !important; background-image:none; background-repeat: no-repeat; } body { background-color: #FFFFFF; background-position: center; background-image: url(AQUI EL URL DE UNA IMAGEN); background-repeat: no-repeat; background-attachment: fixed; } #p_center{ background-color: transparent !important; background-image:none; background-attachment:fixed; background-position: center center; background-repeat: no-repeat; }
.window_content, .box_profile_picture_links{ opacity: 0.0; -moz-opacity: 0.0; filter:alpha(opacity=00);} /*Powered by http://geek-team.net */
El unico problema es que el contenido de algunos cuadros de info. no aparece pero supongo que lo podran arreglar. =)