CSS extend background - css

Question

.page {
background: none;
width: 1000px;
margin: 0 auto;
text-align: left;
padding: 0px 0px 0px 0px;
}
.header-container {
background-image: url("http://patolino.com/img/fundo-top.jpg");
width: 100%;
height: 133px;
}
.header{
padding:0px 0px 0px 0px;
width: 1000px;
position: fixed;
}
.header .logo { float:left;
margin-top:15px;
width: 30%;
}
.header h1.logo {
float:left;
width: 30%;
padding: 0;
}
.nav-container {background: url(http://www.patolino.com/img/bg-menu.jpg) repeat;
width: 1000px;
height: 43px;
left: 0;
padding: 0px 0px 0px 0px;
}
.header .welcome-msg {
}
.header .form-search {
top-margin: 15px;
}
.header .links {
}
div.slidercontrolwr {
top: 30px;
}
.quick-access{
height: 133px;
}
http://imageshack.us/photo/my-images/46/screenshot20130209at818.png/
http://img145.imageshack.us/img145/3022/screenshot20130209at817.png
But basically:
<div class="page">
<div class="header-container">
<div class="header">
<h1 class="logo"><strong>Carol Baby</strong><img src="http://carolbaby.com.br/skin/frontend/base/default/logo.png" alt="Carol Baby"></h1>
<div class="quick-access">
<p class="welcome-msg">Seja bem vindo! </p>
<form id="search_mini_form" action="http://carolbaby.com.br/catalogsearch/result/" method="get">
<div class="form-search">
<label for="search">Buscar:</label>
<input id="search" type="text" name="q" value="" class="input-text" autocomplete="off">
<button type="submit" title="Buscar" class="button"><span><span>Buscar</span></span></button>
<div id="search_autocomplete" class="search-autocomplete" style="display: none;"></div>
<script type="text/javascript">
//<![CDATA[
var searchForm = new Varien.searchForm('search_mini_form', 'search', 'Procure na loja inteira aqui...');
searchForm.initAutocomplete('http://carolbaby.com.br/catalogsearch/ajax/suggest/', 'search_autocomplete');
//]]>
</script>
</div>
</form>
<ul class="links">
<li class="first">Minha Conta</li>
<li>Minha Lista de Desejos</li>
<li>Meu Carrinho</li>
<li>Fechar Compra</li>
<li class=" last">Entrar</li>
</ul>
</div>
</div>
</div>
<div class="nav-container">
<ul id="nav">
<li class="level0 nav-1 level-top first">
<a href="http://carolbaby.com.br/bercos.html" class="level-top">
<span>Berços</span>
</a>
</li><li class="level0 nav-2 level-top">
<a href="http://carolbaby.com.br/roupeiros.html" class="level-top">
<span>Roupeiros</span>
</a>
</li><li class="level0 nav-3 level-top">
<a href="http://carolbaby.com.br/comodas.html" class="level-top">
<span>Cômodas</span>
</a>
</li><li class="level0 nav-4 level-top">
<a href="http://carolbaby.com.br/linhas-completas.html" class="level-top">
<span>Dormitórios Completos</span>
</a>
</li><li class="level0 nav-5 level-top last">
<a href="http://carolbaby.com.br/kits-para-bercos.html" class="level-top">
<span>Kits para Berços</span>
</a>
</li> </ul>
</div>
What I need:
Extend the background fundo-top.jpg and extend bg-menu.jpg to the white sides (left and right) that shows up in sample image [2] borders

Answer 1

I solved it with CSS, working with positions relative and absolute, besides pay attention on divs and sub divs coding.