当浏览器窗口的宽度小于页面宽度缩小时，我无法弄清楚如何使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;
}
答案 0 :(得分：2)
我建议你：
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:
info@ubspack.com</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>
答案 1 :(得分：0)
您可以考虑在其容器左侧浮动#body_wrap_top_logo并设置其边距以调整其位置，而不是使用绝对定位。