How to put a large image in the center of the page and then put a menu inside it?

Issue

I have this vertically formed image that should reach to the bottom of the page. So basically its height should be 100% all the time. Then this same image should also be put at the center of the page, which is pretty simple to do, but what I'm struggling with is making a menu in the middle of the image (inside it).

What are the best ways to achieve that effect? I cannot provide any code try because I don't even know how to start.

This is to demonstrate the problem:

Solution

Demo

html

<div class="menuOnImage">
    <ul>
      <li>Home</li>
      <li>Works</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
</div>

css

.menuOnImage {
    background: url('http://www.picturesnew.com/media/images/image-background.jpg') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top:0;
    bottom:0;
    text-align: center;
    width: 80%;
    left:0;
    right: 0;
    margin: auto;
    height: 100%;
}
ul {
    display: inline-block;
    position: absolute;
    top:0;
    bottom:0;
    height: 110px;
    left:0;
    right: 0;
    margin: auto;
    width: 60%;
    border: 5px solid #fff;
    list-style: none;
    padding:0;
    border-radius: 5px;
    padding: 5px;
    background: rgba(0,0,0,0.4);
}
li {
    border: 2px solid #aaa;
    margin: 2px;
    background: rgba(0,0,0,0.4);
    color: #fff;
}
body, html {
    height: 100%;
    margin:0;
    padding:0;
}

Answered By - 4dgaurav