Question

我有一个标题图片，我希望水平放置，横跨网站的顶部。宽度需要与浏览器窗口相同。

这与StackOverflow顶部的暗条完全相同。

我的包装DIV具有固定宽度，因此我的图像仅出现在DIV的宽度上。如何使其成为浏览器窗口的全宽？

Answer 1

简短的回答是你无法做到。背景图像将始终包含在其父元素中。您可以尝试做的不是将图像用作父元素的背景，而是将其放入其自己的元素中，并将该元素放在容器之外。

例如：

<div class="container">
    <div class="headerImage">
        <ul class="navigation">
            <li><a href="">Link One</a></li>
            <li><a href="">Link Two</a></li>
        </ul>
    </div>
    <div class="otherContent"></div>
</div>

然后在你的CSS中：

.container {
    position: static; // This allows the image to break outside of it's container.
    margin: 0 auto;
    width: 960px;
}

.headerImage {
    background: url(yourImage.png) center top no-repeat transparent;
    display: block;
    position: absolute; // This breaks it out of the normal document flow.
    top: 0; left: 0;
    width: 100%; // This will expand to fill the width of the window.
    height: 65px; // Or whatever height you want.
    z-index: 10; // Play with this number for layering.
}

祝你的项目好运。

Answer 2

从包装div中取出标题div，然后将图像背景的CSS应用到div，您将获得所需的输出。只需通过将标题从包装div中分离出来尝试下面的代码。

.header{
  background-image:url('http://s8.postimg.org/8gehir3e9/Screen_Shot_2014_05_30_at_9_03_30_AM.png');
  background-repeat:repeat-x; 
  height: 40px;
  width: 100%;  
}

Answer 3

你可以为你的div创建一个宽度为100％的父div

如何使HTML背景图像的宽度超出父DIV

3 个答案: