Fondo con background efecto continua html

[markkuss]

Buenas!
Estoy intentando hacer el efecto que se ve en esta pagina : [URL="https://www.cdmon.com/cas/"]https://www.cdmon.com/cas/[/URL]

El efecto que quiero conseguir es que como se puede ver en el menu superior y en el pie de pagina, la barra sea infinita , es decir, que no solo sea el contendor del html, si no que gracias al background haga la sensacion de un menu infinito.

Yo he conseguido con mi html, el contenedor tiene unos 960 px de ancho y 50 px de altura y le he puesto de fondo el color azul. Entonces de background he creado una imagen que es una linia azul de la misma altura que el menu 50px) y de ancho 1 px, entonces lo que le hago es repetir en X.
Entonces mediante photoshop consigo que quede alineado el html y el background. El problema es que tengo que hace un background especifico para cada pagina, ya que la altura de la web va variando y por lo tanto la disposicion del menu de pie de pagina tambien varia.

¿Alguien se le ocurre alguna manera mejor de hacerlo? Muchas gracias!

[cristian_cena]

Podes trabajar una capa contenedora con porcentajes y una capa hija con pixeles

Código HTML:

<div id="liquid">
    <div id="fixed">350x100</div>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
 

Código CSS:

#liquid{
    width: 100%;
    background: purple;
}
#fixed{
    width:350px;
    height:100px;
    background: orange;
    margin: 0 auto;
}
 

Si acompañas el problema con algo de código de tu parte (e imagenes si hace falta) las correcciones se podrían hacer sobre tu trabajo, con lo cual podrías sacar más aprovecho a la respuesta.
Saludos.

[markkuss]

Hola! Gracias por tu respuesta. Mira la imagen de estructura de mi web es esta :


Y el codigo CSS (el contenedor y el body, lo mas importante) :

#contenedor{
margin:auto;
width:940px;
height:auto;
background-color:white;
}

*{margin:0;
padding:0;}

body{
background-image:url(../../Imagenes/back_index.gif);
background-repeat:repeat-x;


}


Lo siento pero no he acabado de entender tu explicación. Tambien he visto que cuando alineo el background correctamente con photoshop para un navegador en concreto, los otros no estan alineados. Estoy seguro de que hay una manera mejor y facil de hacerlo, ya que he visto que muchas web hacen esto, pero no se exactamente como se hace.

Agradezco mucho la ayuda :) Espero que se puede arreglar!

[cristian_cena]

Iniciado por markkuss

Lo siento pero no he acabado de entender tu explicación.

Miralo aca: http://jsfiddle.net/Lrjq3/ lo que no entiendas, solo pregunta.

Iniciado por markkuss

cuando alineo el background correctamente con photoshop para un navegador en concreto, los otros no estan alineados

Lamento no entender esto. Me explicas como lo haces?

A falta de html, tomaré por caso el que hice yo, espero te sirva de ejemplo_
Suponiendo que el rectángulo rojo (de la imagen que adjuntaste) es "#contenedor" debes quitar la caja anidada "pie de página"
Pues si colocas una caja con un width=100% dentro de otra con ancho fijo en pixeles, el 100% de la primera equivaldrá al ancho en píxeles de la segunda y no al ancho de la ventana (que es lo que buscamos).
Asi que bueno, separemos:
(lo hago con divs, luego utiliza las etiquetas de bloque que quieras)

Código HTML:

<div id="contenedor"></div>
<div id="pieDePagina"></div>
 

Ahora que tenemos los contenedores separados, anidamos una caja a #pieDePagina y procedemos de igual modo que en el ejemplo anterior, esta vez lo hacemos con clases. Ahora siempre que uses .liquid y dentro de ella .fixed lograras el efecto, pudiendo extenderlo a otros elementos:

Código CSS:

.liquid{
    width: 100%;
    background: orange;
}
.fixed{
    width: 960px /*los px que quieras aquí*/;
    margin: 0 auto;
}
 

Código HTML:

<div id="contenedor" class="fixed"></div>
<div id="pieDePagina" class="liquid"><div class="fixed"></div></div>
 

Veamos como quedaría el html si agregamos una cabecera al 100%:

Código HTML:

<div id="cabecera" class="liquid">
    <div class="fixed">esto es una cabecera</div>
</div>
<div id="contenedor" class="fixed">
Lorem ipsum dolor sit amet...
</div>
<div id="pieDePagina" class="liquid">
    <div class="fixed">Esto es un pié de página</div>
</div>​
 

Nota que en ningún momento usamos las id.

Seguro habrá mejores maneras de hacerlo, ojalá alguien más pueda hacer su aporte.
Espero que el ejemplo haya quedado más claro y te ayude a solucionar tu problema. Saludos.

pd: tal vez te sirva googlear por "diseño líquido y diseño fijo" para leer en detalle acerca del uso de % y px

[markkuss]

Perfecto! Muchisimas gracias!!! HA FUNCIONADO :)

Muchas gracias por tu ayuda de verdad! Te lo has currado! jeje

Gracias!