Background does not fill on div (only behind txt), don't want to use css3 (just plain old css)

Question

My background does not fill how I wan't it: it only fills behind the txt, not the whole height of the div.. Got two divs inline with a wrapper around it. The right div has a background through CSS. But it does not fill..

Its plain simple but i'm stuck and ashamed (or to tired and in a hurry) -grrr- Got it working with css3, but its to new for some of my "visitors/clients", etc.

Here it is:

    <style type="text/css">
    <!--
    body {
        font: 100%/1.4  Helvetica, Verdana, Arial, sans-serif;
        background: #FFF;
        margin: 0;
        padding: 0;
        color: #000;
    }
    .container {
        width: 100%;
        background: #FFF;
        margin: 0;
        padding:0; 
    }
    .wrapper {
            display: inline-block;
        width:75%;
        float:right;
        text-align:right;
        margin:0;
        padding:0;
    }        
    .wrapper-img {
        display:inline;
        margin:0;
        padding:0;
        width:7px;
        height:45px;
    }
    .wrapper-content-img {
        display:inline;
        margin:0;
        padding:0;
        width: 100%; 
            height: 45px; 
        background-image:url(images/paper-for-info-menu-right.gif);
        /*background-size:100%;*/
    }
    .stretch {
        width:100%;
        height:100%;
    }
    -->
    </style>
    </head>

    <body>

    <div class="container">

    <p>&nbsp;&nbsp;TEST TEST</p>

        <div class="wrapper">

       <div class="wrapper-img"> 
        <img src="images/paper-for-info-menu-left.gif" width="7" height="45"  alt="" />
            <!-- End wrapper img--></div>

    <div class="wrapper-content-img">
        Lorem Ipsum Test Txt - Where is my background?
        <img src="images/paper-for-info-menu-right.gif" width="" height="45px" alt="" />

    <!-- End wrapper content img--></div>

      <!-- End container --></div>
    </body>
    </html>

Thanks, that post has indeed the answers I was looking for! – Melanchoholic Oct 31 '13 at 18:47 — Melanchoholic, Oct 31 '13 at 18:47

score 0 · Accepted Answer · answered Oct 23 '13 at 23:04

0

The height of an element is always limited by its parent, so make sure you set min-height for html, body and other parent elements. If you want a full-size background, consider setting background-image for body

answered Oct 23 '13 at 23:04

Aurelia

1,052
6
28

score 0 · Answer 2 · answered Oct 23 '13 at 23:16

0

The most obvoius solution is to change the wrapper-content-img display property to inline-block:

.wrapper-content-img {
display: inline-block;}

If you don't like to do it you can always trick it (not so clean, but still works) adjusting the height of your content (in this case the padding):

.wrapper-content-img {
display: inline;
margin: 0;
padding: 13px 0px 14px;
}

answered Oct 23 '13 at 23:16

Olèp

449
3
9

This to worked, I do prefer the inline-block instead of padding. As a personal choice. – Melanchoholic Oct 31 '13 at 18:49

Background does not fill on div (only behind txt), don't want to use css3 (just plain old css)

2 Answers2