html - 水平菜单的单个图像

Question

我有一个带有标题的菜单，下面有各种水平链接。我希望将背景图片扩展到所有内容。我的意思是我只想拥有一张图片，而不是像图片一样重复的图 block 。有谁知道如何做到这一点？

这是一个fiddle of my failed attempt .

我还尝试添加一个 div围绕整个<title> + <ul>菜单项，然后将图像添加到 div .那也不管用。

Answer 1

将此添加到您的 .navMenu ul 的 css

 -webkit-background-size: 100% 100%;
 -moz-background-size: 100% 100%;
 -o-background-size: 100% 100%;
  background-size: 100% 100%;

working demo

因为你有 float编辑 div s，不要忘记添加 .clr{clear:both}类在最后(我已经添加了，最后，注意)

编辑

Final DEMO

您的标题在navmenu 之外, 所以将它包装在相同的 bg 下，你必须把所有东西都放在同一个类中.....已经通过<div id="bg">完成了在顶部。

最后是子菜单悬停:

.navMenu ul li:hover ul {
    visibility: visible;
    min-height:120px; /* this is important */
    height:100%;  /* this is important */
    overflow:hidden;
    -webkit-background-size: 100% 100%;
    -moz-background-size: 100% 100%;
    -o-background-size: 100% 100%;
    background-size: 100% 100%;
    background-image:url('http://www.youthedesigner.com/wp-content/uploads/2010/08/14-wrinkled-paper-6.jpg');
}

这很好地完成了工作......