html - 显示 100% 的背景

Question

我有一个导航背景是这样的:

我想以 200px 左右的高度显示这张图片的全高。这就是我现在拥有的:

HTML:

<nav>
    <ul>
        <li>About</li>
        <li>Stop motion</li>
        <li>Contact</li>
        <li><a href="facebook.com"><img src="images/fb.png" alt="facebook"></a></li>
        <li><a href="twitter.com"><img src="images/twitter.png" alt="twitter"></a></li>
    </ul>
</nav>

CSS:

nav{
    background: url(../images/navigation.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height:200px;
    padding:10px;
}
    nav ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
        nav ul li{
            display:inline;
            font-family: 'ralewaysemibold';
            font-size:24px;
        }
            nav ul li img{
                width:36px;
                height:36px;
            }  

但这是结果:

如何确保我看到图像的所有高度？

Answer 1

试试这个一定是这样吗？ DEMO

HTML

<nav>
    <ul>
        <li>About</li>
        <li>Stop motion</li>
        <li>Contact</li>
        <li><a href="facebook.com"><img src="images/fb.png" alt="facebook"></a></li>
        <li><a href="twitter.com"><img src="images/twitter.png" alt="twitter"></a></li>
    </ul>
</nav>

CSS

nav{
    background: url(http://i.stack.imgur.com/5IHG6.jpg) no-repeat; /***change*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  height: 300px;
    padding:10px;
}
    nav ul{
        list-style-type:none;
        margin:0;
        padding:0;
    }
        nav ul li{
            display:inline;
            font-family: 'ralewaysemibold';
            font-size:24px;
        }
            nav ul li img{
                width:36px;
                height:36px;
            }