centering body and big slider

问题

I've managed to uncenter my body while trying to position my slider in the background so that it is also centered and so that it remains centered even when the window is resized.

The site is live if your browser allows to zoom out you can see that the site is centered but when you open it and the slider image is too big it just aligns with the left edge of the window.

I am self-taught so maybe I have missed something or just need some guidance how to fix this. please HELP!

the css is here:

#billboardWrapper {height:600px;width:1800px; margin:-170px auto auto; position:relative; overflow:hidden;  }

#billboard {height:600px;width:1800px;position:relative;/*background:#1c1c1c;*/ background-position: 50% 0pt;}

#billboardPrev,
#billboardNext { display:block; text-indent:-9999px; position:absolute; left:40px; top:270px; width:30px; height:30px; cursor:pointer; background: url(arrows.png) no-repeat 0 0; z-index:99;}
#billboardNext {left:auto; right:40px; background-position:0 -92px; }

.slide {height:600px;width:1800px;display:none;  } 
.slide img {height:600px;  width:100%; background-position: 50% 0pt;  
.slideLeftLayout .slideTitle,.slideLeftLayout .slideText,.slideLeftLayout .slideLink {left:auto;}
.slideRightLayout .slideTitle,.slideRightLayout .slideText,.slideRightLayout .slideLink {right:50px;text-align:auto;}

the html is (copied with firebug as the html is shopify liquid)

<html>
<head>
<body id="welcome" class="index" data-twttr-rendered="true">
<div id="body">
<div id="utility-wrap">
<div id="header-wrap">
<div id="content-wrap">
<script type="text/javascript" src="//dk0684j3ynpoi.cloudfront.net/assets/client.js">
<div id="gatekeeper-content" class="">
<div id="body">
<div id="billboardWrapper">
<span id="billboardPrev">Previous</span>
<span id="billboardNext">Next</span>
<div id="billboard">
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; z-index: 2; opacity: 0; display: none; width: 1800px; height: 600px;">
<div class="slide slideRightLayout" style="position: absolute; top: 0px; left: 0px; display: block; z-index: 3; opacity: 1; width: 1800px; height: 600px;">
<img alt="" src="http://static.shopify.com/s/files/1/0059/9612/t/10/assets/slideTwo.jpg?108526">
</div>
</div>
</div>
</div>

![here is what it looks like zoomed out][2] ![with a narrow resolution the slider aligns with the left side of the window and shifts][3] ![this is what I am aiming at?!??][4]

回答1:

Removing the left:40px from #billboardPrev, #billboardNext on style.css line 287 will make the previous icon visible inside the slider even though you zoom-out the browser.

Also your "Next" icon is not displaying. To display that change background-position: 0 -41px; on #billboardNext in style.css line 288.

Your slider image is too big. Thats why it is shifting when zoom-in and out.

Solution:

Instead of using that big image, split it into 2 imges.

Use the following image as your slider image: