1

我有标题（100% 宽度，277px 高度），并且header我应该有背景图像，x 重复，它将保持在相同的位置（x 轴位置），在所有分辨率上（实际上是 1024+，不需要移动版本所以远的）。这是它在所有分辨率上的外观：

http://i.imgur.com/5rT4Xi9.png?1 （查看利润，以及它下面的云线 - 这是正确的位置）

然而，通过改变分辨率，背景图像也会改变它的位置......

HTML：

万维网

    <h2>Helping you profit</h2>

    <h3>from the Web</h3>
  </div>

  <div id="menu">
    <ul>
      <li>
        <a href="#">Contact us</a>
      </li>

      <li>
        <a href="#">About us</a>
      </li>

      <li class="has-sub">
        <a href="#">The market</a>

        <ul class="submenu">
          <li>
            <a href="#">Mainstream</a>
          </li>

          <li>
            <a href="#">Adult</a>
          </li>

          <li>
            <a href="#">Niche</a>
          </li>
        </ul>
      </li>

      <li>
        <a href="#">Downloads</a>
      </li>
    </ul>
  </div>
</div>

CSS：

header {
    width:100%;
    height:277px;
    z-index:999;
    position:relative;
    background-image:url(images/clouds2.png);
    background-repeat:repeat-x;
    background-position:-133px 0px;
}

http://jsfiddle.net/kF7Br/

测试链接：http ://bybyweb.com/webopps/

我尝试过媒体查询（不是那么聪明的解决方案，你可以在我的 css 底部看到，但没有成功），我考虑过 js/jquery 解决方案，但不知道如何实现......我打开了各种黑客/解决方案（css、jquery、html 结构更改）。

4

3 回答 3

2

您可以使用此代码：

function bgPos(){
    var w = $(window).width() - $('#header-content').width();
    w = w/2;
    $('#header').css('background-position', w+'px 0')
}


$(window).on('resize', bgPos).trigger('resize');

但是你必须做一些数学才能很好地放置它。

小提琴：http: //jsfiddle.net/kF7Br/1/

于 2013-07-12T15:31:59.133 回答
0

你尝试设置

background-attachment:fixed;

此外，如果您不需要它的位置是相对的，请将其设置为绝对。

于 2013-07-12T15:25:31.803 回答
0

对于桌面版本，我建议使用 top 和 center 关键字而不是像素。这种方法看起来不错，直到大约 400px 宽，在那个宽度上，您可以使用响应式媒体查询来覆盖像以前一样的像素值。

background-position:top center;
于 2013-07-12T15:29:13.157 回答