Foros del Web » Creando para Internet » CSS »

problema con fondos en css

Estas en el tema de problema con fondos en css en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 06/11/2007, 16:09
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
problema con fondos en css

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
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #2 (permalink)  
Antiguo 06/11/2007, 19:00
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: problema con fondos en css

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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 06/11/2007, 21:01
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
Re: problema con fondos en css

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 :/
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #4 (permalink)  
Antiguo 06/11/2007, 21:54
Avatar de kaninox  
Fecha de Ingreso: septiembre-2005
Ubicación: In my House
Mensajes: 3.591
Antigüedad: 12 años, 3 meses
Puntos: 49
Re: problema con fondos en css

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
__________________
Gokuh Salvo al mundo. PUNTO!!!!
  #5 (permalink)  
Antiguo 07/11/2007, 04:30
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.727
Antigüedad: 15 años, 10 meses
Puntos: 997
Re: problema con fondos en css

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
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:51.