User Tools

Site Tools


css:background-corners

Fondo cuadrado con esquinas

Solución por XHTML y CSS para fondos fluidos de tablas con divs.

Los divs que queden más cercanos al contenido se aconseja que sean los de las esquinas, puesto que serán los que la imagen quede en un plano más elevado que los demás, y la imagen de fondo quedará superpuesta a estos.

<div id="page">
	<div class="t"><div class="b">
	<div class="l"><div class="r">
	<div class="bl"><div class="br">
	<div class="tl"><div class="tr">
		<div id="content">
		</div> <!-- End #content -->
	</div></div>
	</div></div>
	</div></div>
	</div></div>
	</div>
#page {
float:left;
padding:0 5px 0 30px;
width:62%;
}
#content {
min-height:400px;
padding:30px 20px 10px 25px;
text-align:justify;
}
#page .b {
background:url("../img/b.png") repeat-x scroll 0 100% transparent;
}
#page .bl {
background:url("../img/bl.png") no-repeat scroll 0 100% transparent;
}
#page .br {
background:url("../img/br.png") no-repeat scroll 100% 100% transparent;
}
#page .t {
background:url("../img/t.png") repeat-x scroll 0 0 transparent;
}
#page .tl {
background:url("../img/tl.png") no-repeat scroll 0 0 transparent;
}
#page .tr {
background:url("../img/tr.png") no-repeat scroll 100% 0 transparent;
}
#page .l {
background:url("../img/l.png") repeat-y scroll 0 0 transparent;
}
#page .r {
background:url("../img/r.png") repeat-y scroll 100% 100% transparent;
}
css/background-corners.txt · Last modified: 2010/07/05 13:13 by nejo