html - 背景图像没有向右移动 100%

标签 html css

<分区>

所以我的问题是我需要我的导航栏背景图像在整个页面宽度范围内。这是一个 fiddle :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;
}

最佳答案

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

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/

关于html - 背景图像没有向右移动 100%,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13848110/

上一篇:html - IE() 中的固定宽度布局中断

下一篇:jquery - 选择一天时应用不同的样式 - jQuery multidatepicker

相关文章:

html - 为什么 MDN 建议在视口(viewport)标签中使用 initial-scale=0.86 和 minimum-scale=0.86 来抑制水平滚动?

html - 如何在 Bootstrap 4 中向我的 HTML 元素添加响应式居中文本?

html - 如果父div中没有​​足够的空间,如何将两个div水平放置

asp.net - 图标未显示

html - 跨度位置绝对剥离背景颜色

javascript - 在 Material UI Chip 中对齐头像中心

javascript - 计算a4纸尺寸的div高度

html - 无法让我的导航正确 float 。如何让我的导航向右移动?

CSS ul.topnav li a :active

html - 如何使 div 的高度固定但如果内容大于高度则增长?