html - 背景图像不会 100% 向右

Question

所以我的问题是我需要我的导航栏背景图像在页面宽度的整个距离上保持明智。这是一个小提琴： http: //jsfiddle.net/faytAlvein/FDVby/4/ 导航下的黑色很好忽略它。这在原版中不存在，因为它是不同的背景图像。只是宽度是问题。无论窗口大小如何，它都需要缩放 100% 的页面。如果有帮助，真实的背景图像是 1145x144。

    <div id="navbar" >
        <div id="links" >
            <a href="thisindexpage.php" class="navLink" >Home</a>
            <a href="aboutUs.html" class="navLink" >About Us</a>
        </div>
    </div>​

导航栏.css

#navbar
{
background-image: url('../images/nav.png');
background-repeat: no-repeat;
background-color: black;
}

#links
{
font-size: 20px;
font-family: helvetica;
padding-top: 25px;
padding-bottom: 94px;
margin-left: 150px;
}

Answer 1

您可以使用该background-size属性将背景图像“拉伸”到 100%。

background-size: 100%;

你的 CSS：

#navbar {
   background-image: url('../images/nav.png');
   background-repeat: no-repeat;
   background-color: black;
   background-size: 100%;
}

http://jsfiddle.net/FDVby/7/

Answer 2

使用 background-size 属性这是文档：https ://developer.mozilla.org/en-US/docs/CSS/background-size