DIV1 has background-image and has to show to completely cover DIV2 with DIV2 in front

I created a DIV1 and inside that DIV1 I only want an image. DIV1 with the image is the background (background-image) to another DIV2 with text list content.

I manage to have DIV1 cover the DIV2 content nicely and also show the background-colour, but I cannot replace the background-colour with an image of my choosing. Nothing happens then. What I do wrong?

#backimage {
width: 100px;
height: 100px;
background: url('../images/pic.jpeg');
background-repeat: repeat;
background-position: center center;
display: inline;
overflow: hidden;
margin: 0 auto;
border-radius: 5%;
-moz-border-radius: 5%;
-webkit-border-radius: 5%;
background-color: #F7FAD2;
float: left;
}

And my HTML:

<div id="backimage">
<div class="menu1">
<p>step1</p>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
<div class="menu2">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>
<div class="menu3">
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</div>
</div>

As said, I get the background colour to show, but NOT the background image (and I did verify the path). Why this doesnt work?