problema con fondos en css

kaninox · #1 (**permalink**) 06/11/2007, 16:09

holas gente tengo un problema con 3 fondos en realidad, tengo un fondo en el top de la pagina el cual se degrada y abajo tengo otro fondo pero en la esquina derecha de abajo pretendo embebir :P otra imagen... espero se entienda la idea....

les dejo el link el css esta en el fuente miren
http://www.tiaclaudia.cl/prueba.php

ahora bien las 3 imagenes
la primera me queda bien el problema es la 2 y 3

1.

2.

3.

la 2 me gustaria quedara de fondo con repeat-x
y la 3 sobre la 2 en la parte derecha right sin repeat pero no me sale alguna mano :P

webosiris · #2 (**permalink**) 06/11/2007, 19:00

lamentablemente css3 todavía se esta cocinando, pero en algunos años se podrá adjuntar más de una imagen como background para el mismo elemento :)

Por ahora nos debemos contentar con usar varios elelemntos.
Así que yo haría:
- el fondo1 asignarlo como background repeat-x top -> al elemento body
- el fondo2 asignarlo como background repet-x bottom -> al elemento html o a una capa contenedora
- el fondo3 asignarlo como background a una capa con -> position:aboslute; bottom:0; z-index:100

kaninox · #3 (**permalink**) 06/11/2007, 21:01

lo resolvi solo con dos imagenes pero en el famoso IE no me va la imagen del top tengo

Código:

html {
background : url(../imagenes/up_web.jpg) repeat-x top left;
}

body {
margin:0px;
padding:0px;
background : url(../imagenes/down_web.jpg) repeat-x bottom right;
}

pero la del html no me funciona no me muestra la imagen si en firefox :/

kaninox · #4 (**permalink**) 06/11/2007, 21:54

lo logre :P pero con un codigo medio raro si hay sugerencias son bienvenidas :P

en el css

Código:

html,body{
        margin:0px;
        padding:0px;
        min-height:100%;
}

body {
	background:url(../imagenes/down_web.jpg);
	background-repeat:no-repeat;
	background-position:right bottom;
}
#guarda_superior {
	position:absolute;
	background:url(../imagenes/up_web.jpg);
	width:100%;
	top:0;
	left:0;
	height:132px;
	z-index:1;
	background-repeat: repeat-x;
}
#contenido {
	position:relative;
	z-index:10;
}
* html body{
  height:100%;
}

y en el html

Código:

<body>
<div id='guarda_superior'></div>
<div id='contenido'><b>
aqui mi contenido para pruebas
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
probando al final a 1024*768
</b>
</div>
</body>

solo cuando carga en ie da como un saltito :P pero weno funciona, como dije si hay criticas y demas se agradece para pulir el codigo :P

webosiris · #5 (**permalink**) 07/11/2007, 04:30

podes eliminar #guarda_superior y aplicar el fondo directamente en #contenido
te rehago el código:

Código:

*{     /*esto resetea los margenes por defecto de todos los elementos */
margin:0;
padding:0;}

html, body{
height:100%;
background:url(img/bg-top.jpg) repeat-x top left;
}

#contenedor{
background:url(img/bg-bottom.jpg) repeat-x bottom left;
min-height:100%;
}

Código HTML:

<!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">
<head>
<title>Prueba</title>
</head>
<body>
<div id="contenedor">
<p>aquí adentro va todo el contenido</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<p>y más contenido</p>
</div>
</body>
</html>

eso es todo :)
y si necesitas css especial para ie, en vez del hack * usa comentarios condicionales para ie