如何将大图像放在页面中央，然后在其中放入一个菜单？

Question

我有这个垂直形成的图像，应该到达页面的底部。所以基本上它的高度应该始终为100％。然后同样的图像也应放在页面的中心，这很简单，但我正在努力的是在图像中间（在其中）制作一个菜单。

实现这种效果的最佳方法是什么？我无法提供任何代码尝试，因为我甚至不知道如何开始。帮助将受到高度赞赏。

这是为了证明问题：

Answer 1

HTML：

<div id="largeImage">
    <div id="menu">Menu Here</div>
</div>

CSS：

html, body { width: 100%; height: 100%; }

#largeImage { 
    background: url('path/to/image.jpg'); 
    background-size: cover; 
    width: 100%;
    height: 100%; 
}

#menu { 
    width: 500px; 
    margin: 0 auto; 
}

这应该为你提供做什么的基础:)基本上上面的代码是创建一个100％宽度和高度的div，然后在该div的中间放置一个500px的菜单

Answer 2

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