Como se pone el fondo (azul) detrás del otro fondo(naranja)?

Hola amigos:
He estado intentando por mi cuenta insertar un fondo detrás del fondo principal de la página. Por ejemplo en CCTW hay un fondo azul detrás del naranja, y la verdad es que queda muy bien ya que no se ve el fondo en blanco.
Se me ha ocurrido que como el fondo naranja está en body, en estilos, le he puesto otro body (locura, lo sé) y por supuesto no ha funcionado. Como puedo hacer esta fondo principal que queda debajo del body y cubra toda la ventana?. Me gustaría que fuera una imagen (que ya tengo en objetos), no un color.
Graaaaaaaacias.

Hola:
bueno sigo con el problema de que me queda mucho espacio en blanco a los lados de mi página y he ntentado insertar una imagen antes del body, despues, antes del head después, pero nada, no se como hacerlo para poner un fondo ahí (o un subfondo, como se quiera llamar). Bueno espero que alguien me pueda ayudar a solucionarlo. Un saludo.

sereisa escribió:Hola:
bueno sigo con el problema de que me queda mucho espacio en blanco a los lados de mi página y he ntentado insertar una imagen antes del body, despues, antes del head después, pero nada, no se como hacerlo para poner un fondo ahí (o un subfondo, como se quiera llamar). Bueno espero que alguien me pueda ayudar a solucionarlo. Un saludo.

Hola:

Creo que parece ser que usted está confundid@ en cual es la capa que lleva el color naranja. La capa que debe llevar el color naranja es la capa "contenido" y la capa que debe llevar el color azul es la capa body.
El body es lo que podríamos decir toda su pantalla, y la capa global , que es la que contiene a las demás capas mide de ancho 800 píxeles, por tanto si por ejemplo, para que lo entienda mejor.
Si la pantalla de su ordenador es de 1024 pixeles de ancho, su pagina , cuando le ponga color al body, este medira 1024 de ancho, y si le pone color al body, por ejemplo un azul, toda la pantalla de su pagina será azul.

Ahora si usted dentro del body hace una capa que mide 800píxeles de ancho, y la pone centrada, y le pone color rojo, entonces esa capa de solo 800 píxeles de ancho le quedará centrada y le sobrará por la izquierda (en su pantalla)) 112 píxeles que serán de color azul, (ya que ese es el body) y por la derecha otros 112 píxeles azules

Esta explicación es bastante sencilla, ya que es solo para que comprenda lo que vendría siendo el body y lo que vendria siendo las capas que hay dentro del body

Saludos

Gracias Raulyure:
Entiendo lo que me has explicado y saco una conclusión, seguramente precipitada, que es que ya la he cagao!!.
¿Porque digo esto? porque lo tengo ya tdo cuadrao para la capa body y la global, bueno, no nos engañemos, habrá una manera y no se como hacerlo.
Bueno, entonces de que manera puedo hacerlo para insertar (y donde) una imagen para que se vea por debajo de la capa naranja (no me atrevo a decir cual es) quitandome así los márgenes blancos de los lados.
CCTW lo ha hecho y más o menos es lo que quiero hacer yo. OK, ahí va mi código estilo-general.css
* {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center}
#global {width:800px ; margin: 4px auto}
#curva-superior {background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden}
#cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left}
#publicidad {width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px}
#navegacion ul { margin-left: 10px }
#contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {width: 150px ; float:left ; margin:3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:5px}
#menu li {list-style:none ; margin: 4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ; padding-top:12px}
#pie {border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; height: 65px}
#pie li {list-style: none ; font-size: 12px}
#pieuno {float:left ; width:150px}
#piedos {float:left ; width:498px}
#pietres {float:left ; width:150px}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link{}
a:visited{}


Supongo que tendré que modificar algo aqui, ya que quiero introducir este fondo en todas las páginas.
De todas maneras le seguiré dando vueltas a la cabeza, pero donde no hay mata... no hay patata.
Un saludo y gracias.
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active{}
#pie a {color:blue ; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color:white}
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

sereisa escribió:Gracias Raulyure:
Entiendo lo que me has explicado y saco una conclusión, seguramente precipitada, que es que ya la he cagao!!.
¿Porque digo esto? porque lo tengo ya tdo cuadrao para la capa body y la global, bueno, no nos engañemos, habrá una manera y no se como hacerlo.
Bueno, entonces de que manera puedo hacerlo para insertar (y donde) una imagen para que se vea por debajo de la capa naranja (no me atrevo a decir cual es) quitandome así los márgenes blancos de los lados.
CCTW lo ha hecho y más o menos es lo que quiero hacer yo. OK, ahí va mi código estilo-general.css
* {text-indent:0px ; margin:0px ; padding:0px ; border: 0px}
p {text-align: justify}
h1 {font-size: 1.2em; color:blue ; font-weight: bold ; text-decoration: underline ; text-align: center}
h2 {font.size: 1.1em; color:blue ; font-weight: bold ; text-decoration: none ; text-align: center}
body {text-align: center}
#global {width:800px ; margin: 4px auto}
#curva-superior {background-image: url(objetos/curva-superior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow : hidden}
#cabecera { background-color: white ; border-left: black 1px solid ; border-right: black 1px solid ; height:85px}
#logotipo {width:280px ; float:left}
#publicidad {width:518px ; float:right ; margin-top:25px}
#navegacion {background-color: gray ; border: black 1px solid ; height:20px}
#navegacion li {float:left ; list-style:none ; margin: 0px 10px 0px 10px}
#navegacion ul { margin-left: 10px }
#contenido {background-color: orange ; border-left: black 1px solid ; border-right: black 1px solid}
#contenido p {padding: 5px 10px 5px 10px ; text-indent: 15px}
#menu {width: 150px ; float:left ; margin:3px 10px 3px 3px ; background-image: url(objetos/menu-parte-inferior.gif) ; background-position: bottom ; padding-bottom:5px}
#menu li {list-style:none ; margin: 4px 8px 4px 6px}
#menu h1 {text-decoration:none ; font-size:12px ; background-image: url(objetos/menu-parte-superior.gif) ; padding-top:12px}
#pie {border-left: black 1px solid ; border-right: black 1px solid; border-top: black 1px solid ; height: 65px}
#pie li {list-style: none ; font-size: 12px}
#pieuno {float:left ; width:150px}
#piedos {float:left ; width:498px}
#pietres {float:left ; width:150px}
#curva-inferior { background-image: url(objetos/curva-inferior.gif) ; background-repeat: no-repeat ; width:800px ; height: 12px ; overflow: hidden }
a {color: brown ; text-decoration:none ; display: block }
a:link{}
a:visited{}


Supongo que tendré que modificar algo aqui, ya que quiero introducir este fondo en todas las páginas.
De todas maneras le seguiré dando vueltas a la cabeza, pero donde no hay mata... no hay patata.
Un saludo y gracias.
a:hover {color:red ; text-decoration:underline ; background-color: silver}
a:active{}
#pie a {color:blue ; text-decoration:none ; display: block }
#pie a:link {}
#pie a:visited {}
#pie a:hover {color:black ; text-decoration:underline ; background-color:white}
#pie a:active {color:black}
#logotipo a {}
#logotipo a:link {}
#logotipo a:visited {}
#logotipo a:hover {background-color: white }
#logotipo a:active {}

Hola:

Yo no se cual es el problema que dice usted tener, porque según veo sus códigos están casi como es el curso, lo único que le faltaría sería poner en la hoja de estilo-general el código correspondiente en el body para allí poner la imagen que sería la imagen de fondo.

Y así, en vez de que su body, (o pantalla) de la pagina fuese de color blanco, como en en el body de la hoja de estilo-general no le ha puesto ningún color de fondo, este toma por defecto el color blanco, pues ese color blanco lo cubriría esa imagen de fondo que quiere poner.

También depende el tamaño de la imagen que quiera poner en ese body.

Normalmente es una imagen pequeña (128x128px más o menos), que se repite por todo ese body.

Por eso a continuación de donde tiene usted puesto en el body de la hoja de estilo-general.css ese text-align:center; iría una background-image, o sea una imagen de fondo para ese body, y quedaría más o menos así
body{text-align:center;background-image:url(objetos/fondoimagen.png);background-position:center center;background-repeat:repeat;}

Eso significa que usted pone en el body una imagen de fondo que está en la carpeta objetos y que dicha imagen se llama fondoimagen y que tiene la extensión .png y que dicha imagen la quiere centrada, pero muy centrada y como es pequeña quiere que se repita por todo el body, o sea por toda la página.

Luego cuando usted haga copias de esa plantilla, las copias de esa plantilla seguirán teniéndo esa imagen de fondo.

Si estoy equivocado en la apreciación de su pregunta, me lo dice



A lo mejor lo que usted desea es que la imagen se vea también en la capa contenido, eso significaría que la capa global y la capa contenido tendrían que ser transparentes, (la capa contenido es la capa naranja)
La capa global es la que encierra a todas las demás capas incluyéndo a la capa contenido, pero a la capa global no se le ha puesto color de fondo, por tanto por defecto en estos momentos también es blanca como el body

saludos

Perdon por el retraso en la resuesta, el trabajo me va a matar.
OK Raulyure, perfecto, y lo tenia delante de mis ojos, y lo ponia en el tutorial, exactamante como queria, ponerle fondo a la capa externa (al body). Joder, si me hubiesen explicado así las matemáticas otro gallo me habría cantao. No he sabido expresar el problema tan bien como hubiese querido pero lo has cazao. Muchas gracias.
He puesto una imagen repetida y me ha quedado muy bien pero se me ha quedado la duda de saber si se puede expandir esa imagen para que ocupara toda la página sin repetirla, bueno, se que este es otro tema, si veo que no me respondes abriré otra pregunta para que los demás puedan también resolver sus dudas.
Gracias por todo. Por resolver y enseñar.
Un saludo.