Tengo este asunto que me ha dado un dolor de cabeza, lo que pasa es que estoy usando en mi sitio web una imagen de fondo que se repite a lo largo y a lo ancho (esto no me genera problemas) pero tengo un DIV CENTRADO al que le he asignado otra imagen de fondo centrada y sin repetirse. TODO esto funciona bien, pero quisiera lo siguiente:
que cuando hago pequeña la ventana del navegador, la imagen de fondo del DIV no se pierda o se vaya "out of bounds". o sea que siempre quede alineada con el contenido, que en este caso es un par de tablas, obvio las tablas no se siguen desplazando, siempre se centran de acuerdo al tamaño de la ventana, y cuando la ventana es más pequeña que las tablas, éstas se quedan pegadas a la izquierda.
este es el código:
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 http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4DMX Service</title>
<style type="text/css">
<!--
body {
background-color: #a0a0a0;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-image: url(IMGs/bkITEM.gif);
}
-->
</style>
</head>
<body>
<div style="background:url(IMGs/bk2.gif) top center no-repeat;">
<table width="778" height="138" border="0" align="center">
<tr>
<td height="15"> </td>
</tr>
</table>
<br />
<table width="778" height="386" border="0" align="center">
<tr>
<td width="249" height="364"> </td>
</tr>
</table>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>4DMX Service</title>
<style type="text/css">
<!--
body {
background-color: #a0a0a0;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-image: url(IMGs/bkITEM.gif);
}
-->
</style>
</head>
<body>
<div style="background:url(IMGs/bk2.gif) top center no-repeat;">
<table width="778" height="138" border="0" align="center">
<tr>
<td height="15"> </td>
</tr>
</table>
<br />
<table width="778" height="386" border="0" align="center">
<tr>
<td width="249" height="364"> </td>
</tr>
</table>
</div>
</body>
</html>