I can't figure out how to make the bg_header.png stay in place when the browser window shrinks in width less than the page width. try it: link text
Here is my 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: hid开发者_如何学运维den;
}
#body_wrap_top_logo {
width: 844px;
height: 247px;
background: url('/img/bg_logo.png') no-repeat;
position: absolute;
right: 49%;
overflow: hidden;
}
I would suggest you the following:
1) I see that you have slice the logo with the background. Slice only the logo in png format.
2) Delete the #body_wrap_top_logo div
3) create a new div before nav div, give it float and width-height of the image.
here an example of the above with inline styling.
<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>
You might consider floating #body_wrap_top_logo to the left of its container and setting its margins to tweak its position instead of using absolute positioning.
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论