Hola Comunidad! 
Primero agradecer a Milkmoro su ayuda con la propiedad position!!!
Estoy comenzando a trabajar con la unidad de medida
em, ya que navegando he visto que es muy recomendada. El resultado es impresionante pero para dejar perfecta mi plantilla solo me falta una cosita: que el
background-image no se ajuste al tamaño del resto de los elementos sino que quede fijo en la página, (que no cambie su tamaño por mas que se presione
ctrl + scroll del ratón)
Posteo el código: <!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" />
<meta name="keywords" content="Plantilla, css, dados"/>
<meta name="description" content="plantilla básica en css y javascript" />
<title>Plantilla css y un poquito de js</title> <style type="text/css">
*{margin:0 auto; padding:0;}
html{
width:100%;
height:100%;
overflow:hidden;}
body {
width:100%;
height:100%;
overflow: auto;
background-image:url(mosaico.jpg);
background-repeat:repeat; background-position:fixed;
/*en este caso logro el efecto repitiendo el pattern, el cual varía su tamaño. Pero como hacer que dicho tamaño no varíe en relacion a la unidad de medida "em" si por ejemplo quiero utilizar una imagen con la propiedad no repeat:background-image:mi_imagen.jpg; background-repeat:no-repeat; */
/* background-color: #3399CC;*/
font-size:0.75em;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
}
#header {
width: 48.00em;
height:5em;
background-color: #FFFFFF;
color:#FFFFFF;
padding:1em;
margin-top:1em;
opacity: .7;
filter: alpha(opacity=70);
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius: 8px;
}
#menu_fijo {
/*background-color: #3399CC;*/
width:48.00em;
margin: 0 auto 0 auto; /* top - right - bottom - left*/
padding:1em;
color:#FFFFFF;
}
#menu_fijo li {width:12em;}
#menu_fijo hr { clear:both; visibility:hidden;}
#content {
background-color: #FFFFFF;
color: #666666;
width: 50.00em;
margin:auto;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
-khtml-border-radius: 8px;
opacity: .9;
filter: alpha(opacity=90);
}
#left {
width:10.50em;
float:left;
padding:1em;
}
#right {
width:35.50em;
float:left;
padding:1em;
}
#footer {
width: 48.00em;
background-color:#666666;
color:#FFFFFF;
padding:1em;
clear:both;
margin-bottom:1em;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-khtml-border-radius: 4px;}
#footer a {color:#FFFFFF; text-decoration:none;}
#footer a:hover {color:#336699; background-color:#FFFFFF; opacity: .9; filter: alpha(opacity=90);}
#footer_left {width:10.50em;margin-left:0; float:left;}
#enlaces_footer {width:35.50em;margin-right:0;}
#enlaces_footer h2 {background-color: #FFFFFF;}
#enlaces_footer h2:hover { font-style:italic;}
h1 {
font-size:1.5em;
color: #999999;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: uppercase;
}
h2 {font-size:0.85em;
color: #336699;
letter-spacing: normal;
text-align: left;
word-spacing: normal;
font-family: Arial, Helvetica, sans-serif;
font-style: normal;
line-height: normal;
font-variant: normal;
text-transform: uppercase;
}
</style> </head> <body>
<div id="header">
<h1>Mantenga presionada la tecla ctrl + scroll (ratón) para aumentar o disminuir tamaño de la página</h1>
</div>
<div id="menu_fijo">
<!--menu-->
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="#">INICIO</a></li>
<li><a href="#">Nosotros</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Servicios</a>
<ul>
<li><a href="#">Item1</a></li>
<li><a href="#">Item2</a></li>
<li><a href="#">Item3</a></li>
<li><a href="#">Item4</a></li>
<li><a href="#">Item5</a></li>
</ul>
</li>
<li><a href="#">Contacto</a></li>
</ul>
<!-- fin menu-->
<hr />
</div>
<div id="content">
<div id="left">
<h2>contenido de la columna izquierda</h2><br />
<p>contenido de la columna izquierda contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>
<p>contenido de la columna izquierda</p>
</div><!--left-->
<div id="right">
<h2>contenido de la columna izquierda</h2><br />
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
<p>contenido de la columna izquierda derecha contenido de la columna izquierda derecha contenido de la columna derecha</p>
</div><!--right-->
<div id="footer">
<div id="footer_left">
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><p>opcion 1</p></div>
<div class="AccordionPanelContent"><h2>Contenido 1</h2></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Etiqueta 2</div>
<div class="AccordionPanelContent">Contenido 2</div>
</div>
</div><!--accordion-->
</div><!--footer_left-->
<div id="enlaces_footer">
<a><h2> + Enlaces</h2></a><br /><hr /><br />
<a href="http://ceslava.com/blog/8-breves-trucos-css-imprescindibles/">8 breves trucos CSS imprescindibles</a>
<span> | </span>
<a href="http://www.evolt.org/article/Ten_CSS_tricks_you_may_not_know/17/60369/">Ten CSS tricks you may not know</a>
<span> | </span>
<a href="http://blog.themeforest.net/general/15-css-tricks-that-must-be-learned/">15 CSS Tricks That Must be Learned</a> <span> | </span>
<a href="http://www.spanish-translator-services.com/espanol/t/007/">Hojasde estilo parala Web Trucos y sugerencias para CSS</a>
<span> | </span>
<a href="http://www.cssplay.co.uk/">CSS Play</a>
<span> | </span>
<a href="http://www.araudi.net/ejemplos/IE6fixed.html">Posicion fija(fixed)para IE6</a>
<span> | </span>
<a href="http://www.araudi.net/ejemplos/fondo_fijo_IE.html">Fondo fijo(fixed)para IE6</a>
<span> | </span>
<a href="http://www.araudi.net/migracion/ejemplo_posiciones.html">Posiciones raletiva y fija</a>
<span> | </span>
<a href="http://riddle.pl/emcalc/">Em Calculator</a>
<span> | </span>
<a href="http://foros.cristalab.com/transparencia-en-fondo-div-t20007/">filter:alpha CSS</a>
<br /><br /><hr />
</div> <!--enlaces footer-->
</div> <!-- footer-->
</div><!--content-->
</body>
Desde ya muchas gracias por su ayuda!!