Stretch image according to the content css

Question

How to stretch image according to it's content horizontally with css. alt text

//html code

        <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;

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

    }
</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>
</body>
</html>

But it don't stretch according to the content...

score 1 · Accepted Answer · answered Dec 30 '10 at 08:18

I dont't understand the picture but it seems you're trying to stretch a background-image, which is impossible without using CSS3 property background-size.

Anyway you can place your image in html appliying width:100%, its height will automatically be resized.

(And width:100% is useless for block elements)

Stretch image according to the content css

1 Answers1