Webopps

Question

我有标题（100％宽度，277像素高），在header我应该有背景图像，x重复，保持在相同位置（x轴位置），在所有分辨率上（实际上1024+，到目前为止不需要移动版本）。这是它应该如何看待所有决议：

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

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

HTML：

Webopps

    <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结构更改）开放。

Answer 1

您可以使用此代码：

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/

Answer 2

您是否尝试过设置

background-attachment:fixed;

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

Answer 3

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

background-position:top center;

如何使背景图像位置在所有分辨率上保持相同？

Webopps

3 个答案: