背景图像不会 100% 向右移动 [重复]答案

【问题标题】：background-image does not go 100% to the right [duplicate]背景图像不会 100% 向右移动 [重复]
【发布时间】：2012-11-30 15:36:09
【问题描述】：

所以我的问题是我需要我的导航栏背景图像以明智地走完页面宽度的整个距离。这是一个小提琴：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>

navbar.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;
}

【问题讨论】：

标签： html css

【解决方案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/

【讨论】：

不知道当我在谷歌搜索时我是怎么错过的，但那会做到的。谢谢

【解决方案2】：

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

【讨论】：