Problema margenes navegador web

Hola, como podréis comprobar en la imagen de abajo tengo ciertos problemas a la hora de utilizar divs en html/css.
La imagen de abajo muestra un cierto margen en blanco que no quiero que se muestre en el navegador web. Es fácil quitar este margen poniendo un background fixed, pero es que no quiero un background fixed, ese es el problema.
La idea de mi web es que ocupe todo el navegador solo con barra de movimiento de arriba a abajo, la horizontal no la quiero.
Aqui os pongo los codigos html y css. Muchas gracias.

#contenedorwidth {

 /* z-index: -1;*/
  left: 0;
top: 0;
  width: 100%;
height: 100%;


background-image: url(images/background.jpg);
}
#fondomenu {

height: 165px;
  width: 100%;
background-image: url(images/fondomenu.jpg);
}
<html>
<head>
<link rel="StyleSheet" media="screen" type="text/css" href="estilo.css">
</head>
<body>

<div id="contenedorwidth">
<div id="fondomenu">
</div>

<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
<p> TEXT TEXT TEXT TEXT TEXT TEXT <br /><p>
</div>
</div>
</body>
</html>



Hola:

Es algo difícil, o al menos a mi nunca me ha quedado muy bien. Lo que generalmente me resulta, es, en lugar de utilizar background-image, crear una imagen y a esta darle el 100% de ancho y alto:

<head>
<style>
  .background-img: { width: 100%; height: 100% }
</style>
</hea>
<body>
  <img class="background-img" src="imagen" />
</body>

Espero que te sirva. La otra opción es usar la instrucción CSS3 background-size: cover;.