Разтягане на изображение ,спрямо съдържание

[lam3r4370]

Как да разтегна background картинка ,спрямо съдържанието?
Опитвам се по следния начин ,но не става...
Искам да се разтяга картинката на #middle

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">


<title>Untitled 2</title>
<style>
html, body{
margin: 0;
padding: 0;

}


#cont {
width:100%;
height:125px;

background-color:#1ea1de;
}

.logo {
height:100px;
width:300px;
background: url(logo3.png) no-repeat;
margin-top:-105px;
}
#liniq {
height:2.5px;
width:100%;
background-color: #b5babc;
margin-top:5px;
}
#levo {
background: url(levo.gif) no-repeat;
width:64px;
height:104px;
margin-left:280px;
margin-top:-170px;

}
#buttons {
width:500px;
}
#middle {
background:url(middle.gif) repeat-x;
height:41px;
margin-top:-62px;
margin-left:321px;
border:1px solid red;

}

</style>
</head>

<body>

<div id="cont"></div>
<div class="logo"></div>
<div id="liniq"></div>

<div id="buttons">

<div id="levo"></div>
<div id="middle"></div>
<div id="right"></div>
</div>
</body>
</html>

 

[CosaNostra]

Дай линк към въпросната картинка

ЕДИТ: Не се разширява защото дивът middle ти е в дивът buttons, а на buttons си задал width: 500px От там идва проблема с разширяването

 

[peter_ew]

Използвай

min-width: 100px;

Това ще ограничи див-а до 100px, а при разширение може да стане и повече.

 

[lam3r4370]

Махнах width:500px от #buttons и добавих float:left на #levo и #middle и се оправи