Desarrollo y diseño

ayuda para poner un fondo en la web

bLaCkH0Le
bLaCkH0Le #1 Jul '08

Buenas de nuevo. Mi problema ahora surge cuando quiero colocarle un fondo un poco mas laborioso a una web de oscommerce que estoy haciendo.
El fondo consiste en una cabecera, la cual no se volvera a repetir, un degradado y un sombreado que ira tanto a la derecha como a la izquierda del contenido principal. Lo que no se es como hacer que:

  1. se vea bien a grandes resoluciones
  2. la cabecera no se repita
  3. se vean los sombreados a los laterales de la web

Os paso una imagen y asi seguro que se me entiende mejor. (se ve algo mal por el gif)

B
[Borrado] #2 Jul '08

Espera que hago un crokis de como lo haría yo, ahora edito y lo pongo ^^

EDIT: Bueno no lo había entendido bien, luego miraré si eso que ahora me tengo que ir xD

eagLe__
eagLe__ #3 Jul '08

Yo pondría 1 parte del lateral como 1 imágen y que se repita solo en dirección X. Te recomiendo que sea LAAAAAAAAAAAAAAAAAAAARGA x si acaso hay que hacer mucho scroll :P

bLaCkH0Le
bLaCkH0Le #4 Jul '08

yo habia pensado e anidar unos divs. oscommerce esta hecho en tablas y es una ***** realizarle cambios de este tipo.

bolo9tiko23
bolo9tiko23 #5 Jul '08

separa el fondo en 3 imagenes,

m refiero a hacer 3 capas solo para el fondo, 1 con el naranja y el sobreado que se repita vertcalmente, encima la de la carra gris que se repita horizontalmente y despues encima la imagen que queda arriba sin repeticion.

si puedo t hago como seria en css en un moment

bLaCkH0Le
bLaCkH0Le #6 Jul '08

bolo9tiko23 pero con tu planteamiento con monitores de mucha resolucion como se veria? es que el problema que yo encuentro es como hacer que el div del sombreado baje, e dibv del color se ensanche y baje y el de la cabecera que sólo se quede.

neo-ns
neo-ns #7 Jul '08

Trabaja con % y no con midas fijas! Pon que el background ocupe el 100% del ancho de pantalla y altura no hay que definir la creo pero prueba, ahora no me acuerdo muy bien! No hace falta partir en 3 la imagen!

bolo9tiko23
bolo9tiko23 #8 Jul '08

creo que si que tendras que partirla en 3, si quieres que la franfa gris se estire segun la resolucion y la de el sombreado tb, no lo he probado pero creo que si pones porcentajes la imagen se te va a repetir...y si no la repites pos no se vera,

lo que yo digo es:

  • 1 capa con el fondo naranja y la sombra

  • otra capa con la franja gris, desde el css le dices donde colocarse(en altura) y la repites horizontalmente(para distintas resoluciones puedes darle 100% de ancho).

  • otra con las notas musicales, esta firme, sin repeticion.

Vaya fonde que haces XDD, hay que tener cuidado con esos fondo si quieres alturas dinamicas

bLaCkH0Le
bLaCkH0Le #9 Jul '08

si que me he jodido un poco la cabeza con el fondo jajajaja. el problema del naranja es que va con degradado. Creo que voy a simplificar el fondo. ¿Que podria sacrificar del fondo para que me fuese mucho mas facil?

konkas
konkas #10 Jul '08

yo lo haria así:

  • el background del body de color naranja con una imágen de fondo que sea la franja gris con el trozo de arriba naranja con un repeat-x.
body { background:#fe6f09 url(franja-gris.jpg) repeat-x top left; }
  • luego una capa como contenedor con el fondo de las notas musicales en png con transparencias.
div#container { background: url(notas.png) no-repeat }
bolo9tiko23
bolo9tiko23 #11 Jul '08

#10 necesitas otra capa que seria la del sombreado del borde, y creo que el fondo naranja tiene degradado, asique habria que ponerse 1 poco a pensar cuantas necesitas.

De todas maneras, simplifica eso que no es facil maquetarlo para todas las resoluciones

Usuarios habituales