Ayuda CSS para sitio web..

[crozer]

Hola,
les explico precisamente lo que quiero hacer:
1. Usar esta (http://i31.tinypic.com/bc5fb.jpg) imágen de fondo, que se repita horizontalmente (repeat-x).
2. Que la imágen encaje en la pantalla del usuario. Por ejemplo en www.obama.com, dependiendo de la resolución del usuario, la imágen de fondo se adapta al monitor.

Espero que me haya explicado bien y no haya confundido a todos con ese ejemplo. En otras palabras, simplemente quiero que mi imágen de fondo (http://i31.tinypic.com/bc5fb.jpg) encaje en el tamaño del monitor (qe se vea completa) y bueno, la repetición horizontal es bastante obvia (repeat-x).

CSS:

Código:

/*********** fondo ********/
* {
padding: 0;
margin: 0;
}

body {
background: #324255 url(img/bck_web.jpg) top center no-repeat;
width: auto;
height: 1024px;
}
/********* fin fondo ********/

muchisimas gracias en adelantado,
un saludo,
chris.

[crozer]

Hola,
alguien podría ayudarme porfavor?
Es algo urgente, pues debe estar listo este fin de semana para un cliente.

Muchisimas gracias de antemano!

[kseso?]

Hola Crozer:

Iniciado por crozer

Hola,
alguien podría ayudarme porfavor?
Es algo urgente, pues debe estar listo este fin de semana para un cliente.

Muchisimas gracias de antemano!

Por más prisas que tengas e impaciencia que demuestres no adelantarás que quien pueda darte la solución se conecte antes al foro. Aparte que no suelen ser bien vistos este tipo de mensajes en este foro.

Iniciado por crozer

Espero que me haya explicado bien y no haya confundido a todos con ese ejemplo. En otras palabras, simplemente quiero que mi imágen de fondo (http://i31.tinypic.com/bc5fb.jpg) encaje en el tamaño del monitor (qe se vea completa) y bueno, la repetición horizontal es bastante obvia (repeat-x).

Debes elegir, si tener una imagen que se adapte al tamaño del div que la tiene como fondo o que la imagen se repita. Pero las dos cosas simultáneamente no.

Para lo primero: imagen adaptada puedes pasar por www.araudi.net dinde Mikmoro tiene al menos un par de ejemplos.

Para lo segundo (repetida en el eje x):

body {
background: #324255 url(img/bck_web.jpg) top repeat-x;
}

En este último caso, le puedes marcar el punto en la vertical donde quieras tener la repetición, pero lo hará a lo largo de todo el eje x.
Para repeat-y: equivalente la condición.

Un saludo

[crozer]

Hola,
disculpa por ese mensaje.

Volviendo al tema, he buscado en araudi.net, pero no logro encontrar la solución.
Encontré 3 artículos relevantes: Los primeros dos trataban sobre el fondo elástico deformable y no deformable y el tercero se denominaba "contenido según resolución".

Hice clíc en ese artículo pero no parece ser lo que busco. Pues lo que necesito es que la imágen - siendo más grande que la res. del monitor - se achique y adapte al monitor. O si el monitor tiene una res. más grande que la imágen, que esta se repita a lo largo del eje X y que el color de fondo rellene el espacio superior e inferior.
Un ejemplo de lo que he logrado hasta ahora (en mi caso, la imágen es demasiado alta y aparece la barra para subir/bajar al costado derecho): http://crozzin.com/Layout7/

Muchas gracias de antemano.

[willyfc]

Fijate si tal vez esto puede ayudarte a aclarar

[kseso?]

No pasa nada, Crozer.

Pero te repito, con css debes elegir:
o se repite o se adapta.
Las dos cosas no.

Para eso quizás exista una solución con javascript, quizás, no lo se.

Lo que se suele hacer es tener una imagen bastante grande, digamos 1280px*800px, el motivo principal centrado y fundiéndola hacia los laterales para acabar en ellos en un color sólido.

Esta imagen la colocas en el centro de tu página y para los monitores con mayor resolución se coloca también como fondo el mismo color de los laterales.

Si tu imagen acabase en negro sería así:

body {background: #000 url(tu_imagen.jpg) no-repeat center center;}

Suerte.

Hola Willyfc, me ganaste por la mano. Esa solución con fixed sería complementaria. No se la quise mentar para evitar lo que ya sabemos: liarlo más.

[crozer]

ah ok,
muchas gracias, en serio!.

Hasta luego.