当浏览器窗口的宽度收缩小于页面宽度时，我无法弄清楚如何让 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) 我看到您已将 Logo 与背景切开。仅切片 png 格式的 Logo 。
2) 删除#body_wrap_top_logo div
3) 在nav div之前创建一个新的div，给它float和图像的width-height。
这里是上述带有内联样式的示例。
<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>
关于css - 当浏览器窗口缩小时保持图像固定。请帮忙!，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3543365/