我无法弄清楚当浏览器窗口的宽度小于页面宽度时，如何使bg_header.png保持原位。试试吧： link text当浏览器窗口缩小时，保持图像固定。请帮忙！
这里是我的CSS：
#body_wrap {
width: 100%;
z-index: 1;
overflow: hidden;
}
#body_wrap_top {
width: 100%;
height: 247px;
background: url('/img/bg_header.png') repeat-x;
margin: 0 auto;
overflow: hidden;
}
#body_wrap_top_logo {
width: 844px;
height: 247px;
background: url('/img/bg_logo.png') no-repeat;
position: absolute;
right: 49%;
overflow: hidden;
}
我建议你如下：
1）我看到你有切片与背景的标志。只以png格式切割徽标。
2）删除#body_wrap_top_logo DIV
3）创建NAV DIV前一个新的div，给它漂浮和图像的宽度的高度。
这里是内联样式的上述示例。
<body>
<div id="body_wrap">
<div id="body_wrap_top">
</div>
<div id="body_wrap_body">
</div>
</div>
<div id="body_wrap_mid">
<div id="navmid_wrap">
<a class="navmid_1 left" href="#"></a><a class="navmid_2" href="#"></a><a class="navmid_3" href="#"></a>
<a class="navmid_4" href="#"></a><a class="navmid_5" href="#"></a><a class="navmid_6" href="#"></a>
<a class="navmid_7" href="#"></a><a class="navmid_8" href="#"></a></div>
</div>
<div id="body_wrap_foot">
<div id="foot_wrap">
<div id="foot_topfill">
</div>
<div id="foot1">
<div id="foot1_title">
</div>
<div id="navigateLinks">
<a class="navigateA" href="#">10 reasons</a> <a class="navigateA" href="#">our clients</a>
<a class="navigateA" href="#">technology</a> <a class="navigateA" href="#">intelligence</a>
<a class="navigateA" href="#">ISO 9001:2000</a> <a class="navigateA" href="#">CMMI</a>
<a class="navigateA" href="#">Six Sigma</a> <a class="navigateA" href="#">FAQ's</a>
<div class="navFill">
</div>
<div id="f1x">
The UBS team is working hard to earn your trust and respect to serve as your source for the best custom folding
cartons in the world. </div>
<div id="f1x2">
<p class="copyright">© 2010 UBS Packaging.</p>
</div>
</div>
</div>
<div id="foot2">
<div id="foot2_title">
</div>
<div id="navigateLinks">
<a class="navigateA" href="#">about us</a> <a class="navigateA" href="#">markets</a>
<a class="navigateA" href="#">innovation</a> <a class="navigateA" href="#">services</a>
<a class="navigateA" href="#">case studies</a> <a class="navigateA" href="#">company news</a>
<a class="navigateA" href="#">contact</a> <a class="navigateA" href="#">plant tour</a>
<div class="navFill">
</div>
<a class="navigateA2" href="#">client login</a> <a class="navigateA2" href="#">employee login</a>
<a class="navigateA2" href="#">FTP access</a> <a class="navigateA2" href="#">UBS forms</a>
<div class="navFill">
</div>
<a class="navigateA" href="#">careers</a>
<div class="navFill">
</div>
<a class="navigateA" href="#">site map</a> </div>
<div>
</div>
</div>
<div id="foot3">
<div id="foot3_title">
</div>
<div id="f1">
UBS Packaging<br>2577 Research Drive<br>Corona, CA 92882-7607 USA</div>
<div id="f2">
Tel: 951.273.7900<br>Fax: 951.273.7912</div>
<a class="f3" href="#">driving directions</a> <a class="f3" href="#">chat live</a> <a class="f4" href="#">email:
[email protected]</a> <a class="f5" href="#">blog: http://ubspack/blogger </a>
<div id="social">
<a class="soc1" href="#"></a><a class="soc2" href="#"></a><a class="soc3" href="#"></a>
<a class="soc4" href="#"></a><a class="soc5" href="#"></a></div>
</div>
<div id="foot4">
<form>
<div id="box1">
Your Name</div>
<div id="box_input">
</div>
<div id="box1">
Email Address</div>
<div id="box_input">
</div>
<div id="box1">
Telephone</div>
<div id="box_input">
</div>
<div id="box1">
Message</div>
<div id="box_input2">
</div>
<div id="box_input3">
<div id="checkbox">
</div>
<div id="checkbox2">
UBS Newsletter</div>
</div>
<input class="submit">
</form>
</div>
</div>
</div>
<div id="container">
<div id="headlinks">
<a class="espanol" href="#"></a><a class="employeelogin" href="#"></a><a class="clientlogin" href="#"></a>
<div class="cust">
<a href="index.htm">home</a> | <a href="#">chat live</a> | <a href="#">live person 951.273.7900</a></div>
</div>
<div class="container">
<div style="height: 102px; background: url("http://valogiannis.com/bg_logo.png") no-repeat scroll 0pt 0pt transparent; width: 147px; float: left;"></div>
<ul id="nav">
<li><a href="#" class="navtop_7"></a></li>
<li><a href="#" class="navtop_6"></a></li>
<li><a href="#" class="navtop_5"></a></li>
<li><a href="#" class="navtop_4"></a>
<div class="dropdown dropServices">
<ul style="width: 200px; float: left;">
<li><a href="#">24/7 customer service</a></li>
<li><a href="#">structural design</a></li>
<li><a href="#">pre-press</a></li>
<li><a href="#">clinical trials</a></li>
<li><a href="#">start-up's</a></li>
<li><a href="#">security solutions</a></li>
<li><a href="#">braille</a> </li>
<li><a href="#">source tagging</a></li>
<li><a href="#">fulfillment</a></li>
<li><a href="#">contingency planning</a></li>
<li><a href="#">inventory control</a></li>
<li><a href="#">logistics</a></li>
</ul>
<ul style="width: 155px; float: left;">
<li><a href="#">sheeting</a></li>
<li><a href="#">ink making</a></li>
<li><a href="#">printing</a></li>
<li><a href="#">die making</a></li>
<li><a href="#">die-cutting</a></li>
<li><a href="#">foil hot stamping</a></li>
<li><a href="#">gluing + finishing</a></li>
<li><a href="#">windowing</a></li>
<li><a href="#">quality assurance</a></li>
<li><a href="#">assembly</a></li>
</ul>
</div>
</li>
<li><a href="#" class="navtop_3"></a></li>
<li><a href="#" class="navtop_2"></a>
<div class="dropdown dropMarkets">
<ul>
<li><a href="#">biotech</a></li>
<li><a href="#">cosmetics</a></li>
<li><a href="#">electronics</a></li>
<li><a href="#">entertainment</a></li>
<li><a href="#">foods</a> </li>
<li><a href="#">gift boxes</a></li>
<li><a href="#">health care</a></li>
<li><a href="#">medical device</a></li>
<li><a href="#">nutraceutical</a></li>
<li><a href="#">personal care</a></li>
<li><a href="#">pharmaceutical</a></li>
<li><a href="#">specialty</a></li>
</ul>
</div>
</li>
<li><a href="#" class="navtop_1"></a>
<div class="dropdown dropAbout">
<ul>
<li><a href="#">our story</a></li>
<li><a href="#">UBS vision</a></li>
<li><a href="#">UBS mission</a></li>
<li><a href="#">president's letter</a></li>
<li><a href="#">zero tolerance</a></li>
<li><a href="#">technology</a></li>
<li><a href="#">customers</a></li>
<li><a href="#">meet the team</a></li>
</ul>
</div>
</li>
</ul>
</div>
<div id="slides">
<div class="nivoSlider" style="-moz-border-radius: 7px 7px 7px 7px; position: relative; background: url("assets/slides/slide6.jpg") no-repeat scroll 0% 0% transparent;" id="slider">
<img style="display: none;" alt="" src="assets/slides/slide7.jpg" width="979" height="300"><img style="display: none;" alt="" src="assets/slides/slide6.jpg" width="979" height="300">
<img style="display: none;" alt="" src="assets/slides/slide1.jpg" width="979" height="300">
<img style="display: none;" alt="" src="assets/slides/slide2.jpg" width="979" height="300">
<img style="display: none;" alt="" src="assets/slides/slide3.jpg" width="979" height="300">
<img style="display: none;" alt="" src="assets/slides/slide4.jpg" width="979" height="300">
<img style="display: none;" alt="" src="assets/slides/slide5.jpg" width="979" height="300"> <div style="left: 0px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll 0px 0% transparent; top: 0px; display: block;" class="nivo-slice"></div><div style="left: 65px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -65px 0% transparent; bottom: 0px; display: block;" class="nivo-slice"></div><div style="left: 130px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -130px 0% transparent; top: 0px; display: block;" class="nivo-slice"></div><div style="left: 195px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -195px 0% transparent; bottom: 0px; display: block;" class="nivo-slice"></div><div style="left: 260px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -260px 0% transparent; top: 0px; display: block;" class="nivo-slice"></div><div style="left: 325px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -325px 0% transparent; bottom: 0px; display: block;" class="nivo-slice"></div><div style="left: 390px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -390px 0% transparent; top: 0px; display: block;" class="nivo-slice"></div><div style="left: 455px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -455px 0% transparent; bottom: 0px; display: block;" class="nivo-slice"></div><div style="left: 520px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -520px 0% transparent; top: 0px; display: block;" class="nivo-slice"></div><div style="left: 585px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -585px 0% transparent; bottom: 0px; display: block;" class="nivo-slice"></div><div style="left: 650px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -650px 0% transparent; top: 0px; display: block;" class="nivo-slice"></div><div style="left: 715px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -715px 0% transparent; bottom: 0px; display: block;" class="nivo-slice"></div><div style="left: 780px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -780px 0% transparent; top: 0px; display: block;" class="nivo-slice"></div><div style="left: 845px; width: 65px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -845px 0% transparent; bottom: 0px; display: block;" class="nivo-slice"></div><div style="left: 910px; width: 69px; height: 100%; opacity: 1; background: url("assets/slides/slide1.jpg") no-repeat scroll -910px 0% transparent; top: 0px; display: block;" class="nivo-slice"></div><div style="display: none; opacity: 0.8;" class="nivo-caption"><p></p></div><div class="nivo-controlNav"><a class="nivo-control" rel="0">0</a><a class="nivo-control" rel="1">1</a><a class="nivo-control active" rel="2">2</a><a class="nivo-control" rel="3">3</a><a class="nivo-control" rel="4">4</a><a class="nivo-control" rel="5">5</a><a class="nivo-control" rel="6">6</a></div></div>
<div id="mid_wrap">
<a class="mid1" href="#">
<div class="mid_text">
We understand the importance of always having the essential tools, services and information readily available
for you 24/7. The team at UBS packaging is anxious and ready to provide your company with everything it takes
to study, analyze, prepare, engineer, design and manufacture your custom packaging all under one roof.</div>
</a><a class="mid2" href="#">
<div class="mid_text">
Combine all the years of experience throughout the UBS team and you will discover over 157 years of on-hands,
technical experience in custom folding cartons that can help you achieve the perfect packaging for your products.
The UBS team is ready to serve and provide you with the technical expertise you need to get your packaging right.</div>
</a><a class="mid3" href="#">
<div class="mid_text">
Our passion to be the best folding carton manufacturer in the world stems from the discipline and mentality of
"always doing right the first time" and identifying any non-conformance before it leaves our shipping dock. Quality
control at UBS is not one department or a designated QA staff. It's enforced by every member of the UBS team.
</div>
</a></div>
<div id="tour_wrap">
<a class="tourLink" href="#"></a>
<div class="tourMid">
<div id="tourFiller">
</div>
<div id="tourLine">
<div id="tf1">
</div>
<div id="tf_start">
</div>
<div id="tf2">
</div>
<div class="coda_bubble1">
<div id="st">
<a class="trigger"></a></div>
<div style="display: none;" class="bubble_html">
100% Quality control start to finish </div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
100% Quality control start to finish </td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
24/7 Customer Service & Support </div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
24/7 Customer Service & Support </td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Engineering & Processing </div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Engineering & Processing </td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Structural & Concept Designing </div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Structural & Concept Designing </td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Artwork & Digital Pre-Press </div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Artwork & Digital Pre-Press </td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Plate Making & Die Registration </div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Plate Making & Die Registration </td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Die Making & Tooling Assembly</div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Die Making & Tooling Assembly</td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Ink Making & Color Matching</div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Ink Making & Color Matching</td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Printing with Flexo, UV & Waterbase</div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Printing with Flexo, UV & Waterbase</td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Die Cutting & Blanking </div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Die Cutting & Blanking </td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Foil Stamping with Emboss & Deboss</div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Foil Stamping with Emboss & Deboss</td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble">
<a class="trigger"></a>
<div style="display: none;" class="bubble_html">
Folding Gluing & Conversion </div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Folding Gluing & Conversion </td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf3">
<div id="tf3a">
</div>
<div id="tf3b">
</div>
</div>
<div class="coda_bubble1">
<div id="st">
<a class="trigger"></a></div>
<div style="display: none;" class="bubble_html">
Warehousing & Shipping</div><table class="popup" style="opacity: 0; top: -120px; left: -33px; display: none;"><tbody><tr><td class="corner topleft"></td><td class="top"></td><td class="corner topright"></td></tr><tr><td class="left"></td><td class="bubble_content">
Warehousing & Shipping</td><td class="right"></td></tr><tr><td class="corner bottomleft"></td><td class="bottom"><img src="/assets/skins/classic/bubble-tail2.png" style="display: block;" alt="" width="30" height="29"></td><td class="corner bottomright"></td></tr></tbody></table>
</div>
<div id="tf2">
</div>
<div id="tf_finish">
</div>
<div id="tf1x">
</div>
</div>
</div>
<div class="tourEnd">
</div>
</div>
<div id="quality">
<a class="iso" href="#"></a><a class="six" href="#"></a><a class="cmmi" href="#"></a></div>
</div>
</div>
</body>
你可能会考虑浮动#body_wrap_top_logo其容器左侧并设置其利润来调整它的位置，而不是使用绝对定位的。
但#body_wrap_top_logo在100％宽度的包装内。 如果我将它放到左侧，那么无论浏览器窗口拉伸多宽，#body_wrap_top_logo总是会向左对齐。 我错了吗？ – Erik 2010-08-22 21:16:16
@Erik：我明白你的观点。通常，当我做一些居中定宽的东西时，我会放置一个固定宽度的包装div，左右边距设置为auto，就像你用'div＃slides'完成的一样。这使我可以在固定宽度的容器内自由浮动。我希望这有帮助。 – kbrimington 2010-08-22 21:31:00
@Erik：作为替代方案，您可能会从“min-width”中获得一些里程，但不同浏览器上的里程可能会有所不同。 – kbrimington 2010-08-22 21:31:55