I was making an HTML page that had a div with a image background and a link(s) inside it. 

this is the css for background of the div:  

HTML: 

```
<div class="middle">
 <a href=# style="position:absolute; top: 0px; right:50px;"></a>
</div>

```

CSS: 

```
.middle{
background:#fff url('login.jpg') no-repeat scroll center top;
text-align: center;
margin: 0px auto;
height: 100%;
width: 100%;  
}

```

I have tried the "overflow:auto" step like in numerous questions of the same type but I haven't used any float like in the others, so I am confused. 

What I want to do is that, the div should be of the background's size without explicitly giving the div a height of 'x'px. 

Because for now, I have to constantly specify the div height for every page with image background just so it wont become a zero height div.