divs para el background

gabriel720 · #1 (**permalink**) 19/08/2011, 15:44

hola a todos, estoy realizando una pagina web y el top de esta consta con tres divs para los cuales los divs de la derecha e izquierda quiero poner una imagen de fondo que se vaya repitiendo para que se ajuste a las distintas resoluciones que sea, el problema es que no se como hacer para que solito el div se vaya agrandando para que se vaya ajustando ya que si le pongo una medida no se ajusta si hay otra resolucion, este es el codigo

body {
font: 90% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

.left {
float:left;
background:url(../images/cl.png);
background-repeat:repeat-x;
height:190px;

}

.top {
margin:auto;
width:890px;
background:url(../images/top.png);
padding-top:190px;
}

.right {
float:right;
background:url(../images/cl.png);
background-repeat:repeat-x;
height:190px;
}

IsaBelM · #2 (**permalink**) 19/08/2011, 16:02

prueba con este script

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Page</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
position: relative;
}
#contenedor {
width: 1280px; /* cambiar esta medida según el ancho del monitor en el que se pruebe */
height: 80%;
position: absolute;
left: 50%;
top: 0;
margin-left: -640px; /* la mitad del width en negativo */
}
#izquierdo {
position: absolute;
left: 0;
top: 0;
width: 140px;
height: 100%;
background-color: blue;
}

#centro {
position: absolute;
left: 140px;
top: 0;
width: 1000px;
height: 100%;
background-color: yellow;
}

#derecho {
position: absolute;
right: 0;
top: 0;
width: 140px;
height: 100%;
background-color: blue;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="izquierdo"></div>
<div id="centro">Texto</div>
<div id="derecho"></div>
</div>
</body>
</html>

gabriel720 · #3 (**permalink**) 19/08/2011, 16:45

Cita:

Iniciado por IsaBelM

prueba con este script

gracias por la respuesta, una cosa lo realize pero con una tabla y si funciona pero se puede hacer sin necesidaad que sea una tabla de ley???

este es el codigo

html:

<body class="thrColFixHdr">
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="left"></td>
<td width="890"><img src="images/top.png" width="890" height="190" /></td>
<td class="right"></td>
</tr>
</table>

</body>

css:
body {
font: 90% Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

.left {

background:url(../images/cl.png);
background-repeat:repeat-x;

}

.top {
margin:auto;
width:890px;
background:url(../images/top.png);
height:190px;
}

.right {
background:url(../images/cl.png);
background-repeat:repeat-x;

}

IsaBelM · #4 (**permalink**) 20/08/2011, 05:26

Cita:

Iniciado por gabriel720

gracias por la respuesta, una cosa lo realize pero con una tabla y si funciona pero se puede hacer sin necesidaad que sea una tabla de ley???

no le encuentro sentido a lo que dices. para que maquetar con tablas?? puedes hacer que unos bloques se comporten como tablas, usando una serie de valores que se le asigna a la propiedades display (table, table-row, table-cell, ...)