Dos fondos en un body, se puede?! ayuda..

RufioStill · #1 (**permalink**) 20/10/2008, 17:42

Hola.. necesito una mano

, puedo poner dos fondos en un body? quiero que el segundo quede abajo del primero pero que los 2 estén en el body.. alguna solución?

Mikmoro · #2 (**permalink**) 20/10/2008, 17:49

Cita:

Iniciado por RufioStill

Hola.. necesito una mano

, puedo poner dos fondos en un body? quiero que el segundo quede abajo del primero pero que los 2 estén en el body.. alguna solución?

No, no hay. Puede que si muestras claramente qué te gustaría conseguir haya una solución, pero dos fondos en un body no es posible.

RufioStill · #3 (**permalink**) 20/10/2008, 18:16

:l no se bien como explicarlo....

Pero aquí voy:

Entra a http://mybbtest.webspacemania.com/ejemplo.html si tienes la resolucion de tu pantalla en 1024 vas a ver un fondo celeste normal, ahora pon "control y (-)" o cambiale la resolucion a tu pantalla a una mas grande de 1024 y vas a ver un borde blanco al costado, ahora quiero agregar este fondo: http://img208.imageshack.us/img208/9466/otrofondocg2.gif (aparte del que ya esta situado arriba en el body) para que el borde blanco siga hacia abajo.. Esto lo hago para no tener problemas con resoluciones de pantalla...

Ojala me haya dejado entender xD soy un poco confuso a la hora de explicar cosas :l..

GastoNike · #4 (**permalink**) 20/10/2008, 19:41

Se puede simular el efecto haciendo:

html {
background: propiedades;
}
body {
background: propiedades;
}

;)

Saludos.

RufioStill · #5 (**permalink**) 20/10/2008, 20:23

Cita:

Iniciado por GastoNike

Se puede simular el efecto haciendo:

html {
background: propiedades;
}
body {
background: propiedades;
}

;)

Saludos.

Bueno antes de preguntar aqui busque mucho e intente eso pero no me da resultado :( no se si lo que hago este mal?... como seria el codigo editado?

Aqui el codigo de fuente de http://mybbtest.webspacemania.com/ejemplo.html:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>T�tulo de la web</title>
<style type="text/css">
body{
background: #8eb2cc url(http://img339.imageshack.us/img339/8531/logoupfx1.jpg) center top no-repeat;
font: 76% arial;
margin:0 0 5px 0;
padding: 0;
}
p{
color: #fff;
}

#contenedor{
	width: 930px;
	margin: 0 auto;
	margin-top: 160px;
	padding: 5px;
	border: 1px solid #c6d2b8;
	background: #f6f4ec;
}
#medio{
	float: left;
	margin: 5px 5px 5px 0px;
	width: 930px;
	background: #e7e5d2;
}
#pie {
	clear: both;
	border-top: 1px solid #5e534f;
	background-color: #e7e5d2;
}
#pie p{
	margin:0;
	padding:5px 10px
}

</style>
	
</head>
<body>
<div id="body">
<div id="contenedor">
<div id="medio">
<p>Prueba</p>

<p>Prueba</p>
<p>Prueba</p><p>Prueba</p><p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>

<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
</div>
<div id="pie"><p>PruebaPruebaPrueba</p></div>
</div>
</div>
</body>
</html>

gracias..

Null_ · #6 (**permalink**) 20/10/2008, 20:53

si se pueden poner dos fondos
dentro de dos divs (o 1 contando con el body)
la gracia de esto es que fuesen dos imagenes :P

Tambien puedes hacer fondos infinitos poniendo muchos divs, por ejemplo al crear un cuadro con esquinas redondeadas, necesitas 4 divs (1 div para cada esquina de imagen)

Suerte :D

RufioStill · #7 (**permalink**) 20/10/2008, 21:04

Cita:

Iniciado por Null_

si se pueden poner dos fondos
dentro de dos divs (o 1 contando con el body)
la gracia de esto es que fuesen dos imagenes :P

Tambien puedes hacer fondos infinitos poniendo muchos divs, por ejemplo al crear un cuadro con esquinas redondeadas, necesitas 4 divs (1 div para cada esquina de imagen)

Suerte :D

Uhm :S y alguna idea de como logro lo que quiero xP?

Quiero lograr esto:

Cita:

Iniciado por RufioStill

:l no se bien como explicarlo....

Pero aquí voy:

Entra a http://mybbtest.webspacemania.com/ejemplo.html si tienes la resolucion de tu pantalla en 1024 vas a ver un fondo celeste normal, ahora pon "control y (-)" o cambiale la resolucion a tu pantalla a una mas grande de 1024 y vas a ver un borde blanco al costado, ahora quiero agregar este fondo: http://img208.imageshack.us/img208/9466/otrofondocg2.gif (aparte del que ya esta situado arriba en el body) para que el borde blanco siga hacia abajo.. Esto lo hago para no tener problemas con resoluciones de pantalla...

Ojala me haya dejado entender xD soy un poco confuso a la hora de explicar cosas :l..

Null_ · #8 (**permalink**) 20/10/2008, 22:15

Prueba este codigo

Cita:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Titulo de la web</title>
<style type="text/css">
body{
background: #8eb2cc url(http://img339.imageshack.us/img339/8531/logoupfx1.jpg) center top no-repeat;
font: 76% arial;
margin:0 0 5px 0;
padding: 0;
}

#caja {
background:url('http://img208.imageshack.us/img208/9466/otrofondocg2.gif') center top repeat-y;
padding-bottom:20px;}

p{
color: #fff;
}

#contenedor{
width: 930px;
margin: 0 auto;
margin-top: 160px;
padding: 5px;
border: 1px solid #c6d2b8;
background: #f6f4ec;
}
#medio{
float: left;
margin: 5px 5px 5px 0px;
width: 930px;
background: #e7e5d2;
}
#pie {
clear: both;
border-top: 1px solid #5e534f;
background-color: #e7e5d2;
}
#pie p{
margin:0;
padding:5px 10px
}

</style>

</head>
<body>
<div id="caja">
<div id="contenedor">
<div id="medio">
<p>Prueba</p>

<p>Prueba</p>
<p>Prueba</p><p>Prueba</p><p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>

<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
<p>Prueba</p>
</div>
<div id="pie"><p>PruebaPruebaPrueba</p></div>
</div>
</div>
</body>
</html>

Suerte :D

RufioStill · #9 (**permalink**) 20/10/2008, 22:44

Cita:

Iniciado por Null_

Prueba este codigo

Suerte :D

Gracias :D a simple vista funciona de lujo muchas gracias :D

Null_ · #10 (**permalink**) 20/10/2008, 23:23

^^
de nada amigo

thorrr · #11 (**permalink**) 03/06/2009, 13:15

Por favor, necesito ayuda, quiero utilizar el último ejemplo que habeis puesto, pero en explorer no centra bien el cuadro del medio.

¿Como se podría arreglar eso?

Un saludo!

thorrr · #12 (**permalink**) 03/06/2009, 17:09

Nada, ya lo he solucionado. Había que poner en el

body:

Código:

text-align:center;

y en el contenedor:

Código:

text-align:left;

Por lo visto no es la primera vez que el "margin: 0 auto;" de problemas con IE.

Muchas gracias, sobre todo a ti, Null_ que me ha venido muy bien tu aportación.

Saludos!