Problemas etiqueta "body" y redimensionar
7 seguidores
Hace poco que he empezado con el CSS y tengo la etiqueta body tal que así:
<code>body {
background-color: #DDD5C3;
background-repeat: no-repeat;
background-image: url(Img_bg_intro.jpg);
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #575551;
width: 1024px;
height: 768px;
margin-left: 0;
background-position: center;
}
</code>
El tema esta que quiero que la imagen de fondo se quede centrada en la página pero que al redimensionar la página me salgan los scrolls y la imagen no se mueva pero al poner la propiedad "background-position: center;" conforme vas redimensionando la pantalla a más pequeña la imagen se va centrando y el texto se que queda por el camino...
¿Que solucion teneis vosotros?
Gracias de antemano!
Un saludo
x8
Dahl
Buenas, no le deis mas vueltas. La editorial de ayd la hace Dahl o sea Xavier Bota o sea muua :)
Encantado :-D, me trago todos los números de AyD..
dahl
Buenas, no le deis mas vueltas. La editorial de ayd la hace Dahl o sea Xavier Bota o sea muua :)
xavib
Diablos, pues si lo estoy escribiendo no me he dado cuenta. Si puedes pegarle una fotaza a esa página ni que sea con el móvil y me la mandas estupendo, porque podría tratarse de un impostor, un clon, un hermano perdido, un primo... a saber. Igual existo en dos planos diferentes de la realidad y no me he dado cuenta.
Me alegro de que solucionaras el asunto ;)
script
Jajaja, hola Xavib, tranquilo la solución estaba por otro camino. Lo que hice fue currarme tres fondos a diferentes resoluciones y en el index un script que te llevara a cada página segun tu resolucion de pantalla. Fue simple y rápido,:)
Respecto a lo de escribir el artículo, pues ahora mismo no tengo ninguno delante pero en cuanto llegue a casa te digo quien escribe porque es el mismo nombre de usuario "xavib" pero escrito un con letra a mano y tiene un icono arriba muy parecido al que tu llevas...que extraño.
¡¡¡Juraría que me la estas dando de canto!!!jajaja.
Un saludo.
xavib
El rescataposts! Perdona script, no me di cuenta de tu pregunta ni de que no habias podido solucionar el bollo este. ¿Pudiste solucionarlo?
.... y no, que yo sepa no soy yo el que escribe el artículo de la portada de AyD. ¿Sabes cómo se llama? Porque sé que hay varios pájaros que se llaman igual que yo y este que dices no sé si está fichado ^_^
script
Ya, entendido esta, pero sigue pasando lo mismo. la imágen sigue centrándose conforme redimensiones la ventana y yo quiero que esté fija...
Por cierto, no has contestado a lo de si eres tu el que escribes los artículos en AyD...jeje. Mira que como no contestes envio una carta a la sección inexistente de correo del lector!jajaja.
xavib
pero... imaginando que tienes el contenido centrado con un DIV, porqué no pones la imagen de fondo a ese DIV en lugar de al BODY?
Creo que es lo que te comentaba antes, en realidad no quieres centrarla con respecto al body sino con respecto al contenido, con lo que el fondo debería estar en el contenido, no en el body.
script
http://www.jbestudiocreativo.com/Img_bg_intro.jpg
Esta es la imagen de fondo de un html, donde hay un texto con enlaces que va dentro del recuadro y mi nombre del estudio bajo entre las flores.
El problema es que quiero centrar la imagen en el navegador para las diferentes resoluciones y el cliente quiere poder redimensionar la pantalla del navegador.
En pantalla completa va bien, pero en cuanto coges de la esquina y tiras para hacerla más pequeña el texto se queda en el sitio y la imagen se va moviendo conforme se va centrando a la pantalla del navegador y yo quiero que se quede totalmente fija (que el navegador recorte la página).
Pensaba que con el paramentro anexo=fijo. se solucionaría pero no, se lo pasan por ahí bajo.
Por cierto, solo llevo un año por aquí y aun no conozco a usuarios, pero...Xavib, ¿tu no eres el que escribes el artículo de portada en "AyD"??? Perdona mi indiscrección...
un saludo!
xavib
Según entiendo, en realidad no quieres centrar el fondo con respecto al body, sino con respecto a un contenido concreto. Si eso fuera cierto, deberías ponerla en el fondo de ese contenido, no del body.
Una solución que no he probado pero que sé de buena tinta que debe poder hacerse es posicionar el fondo con porcentajes... algo como
<code>body {
background:url(tralaritralara.jpg) 50% 50% no-repeat;
}</code>
pero eso sólo tiene sentido si el resto está con porcentajes.
¿No puedes postear un ejemplo? Aunque sea una imagen de lo que quieres...
En cuanto a maquetar distintas páginas, en caso de que fuera necesario, podrías solucionarlo con distintos CSS, sin tener que montar varios HTML.
script
txuma
<div class="quote">
Script
<blockquote>
Otra preguntilla...¿para que sirven las unidades ems y la exs?, porque estoy buscando por el google y no encuentro nada...vi a buscar por el foro a ve.</blockquote>
</div>
Lleva a revisar tu google, que tiene algo malo seguro :)
Sobre la pregunta del hilo, no soy capaz de entender qué quieres :?
Jajaja, tendré que llevarlo si, gracias txuma pero si entras en cada enlace ninguno explica en concreto que es el ems y el exs o al menos en los que yo he estado, y te aseguro que son mas de diez, de todas formas gracias por la busqueda, me la volveré a mirar.
Respecto a la pregunta principal, es si se puede centrar una imagen en body (o en cualquier div) y que cuando redimensiones la ventana el navegador no actualize, ya que si actualiza la imagen se va moviendo siempre al centro del navegador y yo quiero que esté fija ( con el parámetro "anexo=fijo" debería funcionar, pero no) y que las scrollbars se coman la página en cuanto redimensiones hacia más pequeña.
El problema subyace de querer adaptar una sola página html con imagen de fondo a todas las resoluciones y navegadores, pero es una locura. Voy a optar por crearme una condicional en javascript que detecte la resolucion para cada uno y me redireccione a diferentes html con diferentes resoluciones maquetadas.
txuma Plus
Script
Otra preguntilla...¿para que sirven las unidades ems y la exs?, porque estoy buscando por el google y no encuentro nada...vi a buscar por el foro a ve.
Lleva a revisar tu google, que tiene algo malo seguro :)
Sobre la pregunta del hilo, no soy capaz de entender qué quieres :?
danielsandesign
Ah, no te había entendido.
En ese caso con
background: #DDD5C3 url(Img_bg_intro.jpg) top left no-repeat;
tendrás el fondo siempre fijo arriba y contra la izquierda.
script
Perdonar pero eso ya lo he probado y al menos el ff se lo pasa por el forro...
Creo que opteré por centrarlo todo y punto, de esta forma al menos sabré que todo está centrado a cualquier resolución.
Otra preguntilla...¿para que sirven las unidades ems y la exs?, porque estoy buscando por el google y no encuentro nada...vi a buscar por el foro a ve.
chusmy
No estoy seguro si es lo que quieres, pero prueba con:
<code>background-attachment:fixed;</code>
script
Hola Clonn, lo de 100% esta bien, ya ta cambiado pero aún así, cuando arrastras la esquina inferior derecha para redimensionar la imagen de fondo tambíen se mueve y yo quiero que se quede fija porque tengo texto que tiene que coincidir en ciertos lugares y para que se joda con diferentes resoluciones y los % prefiero que se quede todo fijo y punto.
Creo que es casi imposible no? Porque no tiene sentido que quiera centrar una imagen y que se mantenga quieta porque hay muchas resoluciones diferentes, me equivoco o haya alguna forma de hacerlo?
danielsandesign
Desde mi <em>obtusés</em> creo que lo puedes resumir en esto.
body {
background: #DDD5C3 url(Img_bg_intro.jpg) center no-repeat;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #575551;
/* aquí utiliza % */
width: 100%;
height: 100%;
margin-left: 0;
}