Fondo de página rotante
5 seguidores
hola amigos,
estoy por empezar un nuevo sitio en css.
Tengo una pregunta para hacerles,
tengo una página divida en cabezal, medio y footer. verdad? todas tienen una imagen de fondo que se repite horizontalmente. En el medio y footer es un color, pero en el cabezal la idea es que sea una imagen que se repite indefinidamente hacia los costados, pero que cuando cambio sección esa imagen cambie.
Se me ocurrió poner en el body todo pero si lo pongo en el body será siempre la misma foto y no cambiará.
Espero me hayan entendio y puedan ayudarme!
gracias,
webfordesigners
Hola Lucía :)
Pues sí, nos has pillado ;) Usamos canvas y javascript. El nombre clave es "CUFON" encontrarás bastante info al respecto. Al principio usábamos sIFR pero en cuanto quieres hacer algo en serio te salen problemas con el flash (las capas y los flash no se llevan bien y cuando haces animaciones en javascript es un jaleo...). De todas maneras estamos mirando (I+D) CSS3 y usar las tipografías. Se han hecho muchos adelantos con eso y estamos haciendo pruebas a ver lo maduro que está. Tiempo al tiempo.
Cualquier cosa ya sabes :) Y si te va mejor mi mail está en la web (nuevos_proyectos) me llega directamente a mi :)
Santi
Lucía
Hola Santi,
cómo estas?
Me gustaría preguntarte algo que ví creo en tu sitio web. Utilizas sifr o algo por el estilo para cambiar los textos y poner tipografías no convencionales de web? porq quiero intentarlo, me bajé sifr pero no le he usado todavía y si tu lo usaba me gustaría que me digas que tal es....
perdona que te contacte por este medio pero es que pensé que se podía escribir directamente a los contactos pero me dí cuenta que no....jejej
gracias!
saludos,
Lucía
de nadas! espero te haya salido!
saludos!
:)
danielbelchi
Es la misma solución, Santi, pero a diferencia del enlace de Lucía, tu artículo lo da todo mascadito, así que tanto mejor.
Mil gracias a los dos!
webfordesigners
Hola!
Creo que este artículo te puede ir bien
http://blog.urbanmainframe.com/2009/05/create-a-dynamically-resizing-background-image-using-css/
Es lo máximo que se puede hacer en css. Es una aproximación, para hacerlo perfecto se necesita javascript. :(
Santi
danielbelchi
Eso mismo! Aunque no sé si será por el ejemplo, pero creo que no quedará bien :P. Lo probaré de todos modos.
Muchas gracias Lucía! :D
Lucía
tipo esto?
http://www.cssplay.co.uk/layouts/background
danielbelchi
Nono, la idea es que NO se repita y que en su lugar una ÚNICA imagen ocupe toda la pantalla del navegador. Como un fondo de escritorio, vaya, en el que independientemente de la resolución a la que esté la pantalla esa imagen se estira o se encoge para ajustarse al 100%.
Agradezco tu respuesta, que en cualquier caso está más arriba. Sería una falta de respeto preguntar por algo que ya se ha dicho incluso dentro del mismo hilo.
Lucía
hola daniel,
si es una imagen que se repite solo pones por ejemplo:
body {
background-image:url(img/bkgr.png);
background-repeat:repeat-x;
}
repeat-x si es para repetirse horizontalmente
repeat-y si es para repetirse verticalmente.
espero haberte ayudado
saludos!
}
danielbelchi
Aprovecho el hilo para otra pregunta:
Siendo este parte del código de mi tumblr...
body {background: {color:Background} url('{image:Background}') top left fixed;
margin: 0;
padding: 0;
font-family: {font:Body};
}
¿Cómo puedo ajustar esa imagen de fondo para que ocupe el 100% de la ventana del navegador? Lo que quiero es poner una imagen de gran resolución capaz de adaptarse, haciéndose más pequeña o más grande, a las distintas resoluciones de visionado.
No creo que haya que echar mano de javascript ni movidas de esas, ¿no?
webfordesigners
Me alegro que ya esté solucionado! :)
Santi
Lucía
hola! muchas gracias por responder tan rápido! ya pude! fue un error mio, no cambié la imagen entonces no me la reconocía!
gracias!
webfordesigners
mira que no tengas un body a solas declarado en el css, eso anularía el body.pagina2.
puede ser eso?
Santi
Lucía
hola webfordesigner! sabes que probé lo del body class y no me funciona. En la página 2 cuando cambio el body no me hace nada.
Este es mi código
<body class="pagina2">
bla bla bla
<body>
y en el css
body.pagina2{
margin:0px; padding:0px;
background-image:url(img/bkgr01.png);
background-repeat:repeat-x;
background-color:#e3e2e2;
}
pero no me toma el cambio de imagen de fondo.
me explico?
espero puedas ayudarme,
gracias!
saludos!
markshock
de nada, con eso creo que indagando un poco (que es de lo que se trata) puedes conseguir lo que quieres ;)
Lucía
gracias markshock!
saludos,
:)
markshock
<style>#cabecera{
width:100%;
height:50px;
}
#cabecera.imagen1{
background:url(imagen1) repeat-x;
}
#cabecera.imagen2{
background:url(imagen2) repeat-x;
}
</style>
por ejemplo, página 1
<div id="cabecera" class="imagen1">bla bla bla</div><div id="body">bla bla bla</div>
<div id="footer">bla bla bla</div>
página 2
<div id="cabecera" class="imagen2">bla bla bla</div>
<div id="body">bla bla bla</div>
<div id="footer">bla bla bla</div>
etc....
Con el repeat-x repetirás una imagen que dibuje un patrón en forma horizontal... si quieres dibujar un patrón mas general, usa solo "repeat"
Pim pam! toma lacasitos ;)
Lucía
cuviline: si hago lo de repeat-x, no se repite solo dentro del ancho div del header? yo quiero que se repita indefinidamente.
web for designers: no sabía lo del body para cada página! voy a probarlo, eso puede funcionar
gracias a ambos por la ayuda!!!
saludos,
webfordesigners
Hola Lucía,
yo tampoco lo entiendo muy bien. Puedes hacer un body para cada página si quieres.
html
<body class="pagina1">
css
body.pagina1{
background: ....
}
Es eso?
Suerte!
Cloudstudio
Si, lo de la imagen sin fin, no tiene mas misterio, vamos a poner un ejemplo :
en el css haces lo siguiente
#header{
background-image: loquesea repeat-x;
}
Simplemente con eso, la imagen ya se repite hasta el final, para que cambie segun la pantalla, pues puedes hacer con javascript, sin complicarte mucho
Lucía
exacto. cuando cambio de pantalla se cambia esa imagen del cabezal. Pero es una imagen que se continúa sin fin hacia los laterales, horizontalmente,
me entiendes?
jeje, es difícil de explicar.
espero me entiendas!
gracias!
Cloudstudio
Lucía será porque estoy espeso hoy, pero me perdí un poco, lo que quieres hacer es poner una imagen en el cabezal, y que cuando cambies de pantalla cambie la imagen por otra ?