如何使背景图像位置保持不变在所有分辨率？ [英] How to make background image position stay same on all resolutions?

问题描述

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

I have header (100% width, 277px height), and in header I should have background image, x-repeated, which will stay in same position (x axis position), on all resolutions (1024+ actually, no need for mobile version so far). This is how it should look on all resolutions:

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

http://i.imgur.com/5rT4Xi9.png?1 (see profit, and cloud line under it - that's right position)

但是，通过更改分辨率，背景图片的位置也会改变...

However, by changing resolution, background image changes it's position too ...

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解决方案，但不知道如何使它...我打开所有种类的hacks /解决方案（css，jquery ，html结构变化）。

I have tried with media queries (not so smart solution, you can see at the bottom of my css, but without success), i have thought about js/jquery solutions, but have no idea how to make it... I am opened to all kind of hacks/solutions (css, jquery, html structure changes).

推荐答案

您可以使用此代码：

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');

但你必须做一些数学才能把它放好。

But you will have to do some maths to place it well.

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

这篇关于如何使背景图像位置保持不变在所有分辨率？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！