I am currently designing a website using Twitter Bootstrap. Take a look at the preview here: preview
My goal is to create a full-width background slider. When viewing the preview at a resolution above 1100px, everything looks as intended. However, if you resize the browser window, you'll notice that the image remains aligned to the left instead of centering in the window and cutting off the edges (which is what I'm aiming for). I've been trying to solve this issue but haven't found a solution yet. Any suggestions would be greatly appreciated.
Below is the code snippet for the slider:
<!-- Slider Top -->
<div id="myCarousel" class="carousel slide">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
</ol>
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="img/backgrounds/01.jpg" alt="graduation gift" /></div>
<div class="item"><img src="img/backgrounds/02.jpg" alt="graduation gift" /></div>
</div>
<div class="clearfix"></div>
</div>
<!-- End Slider Top -->
<!-- Slider Overlay -->
<div class="container">
<div class="row">
<div class="span4 sliderFeature">
<h1 class="whiteShadow">Primary Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="signUp">
<h4>Get Started With GraduationGifts.com</h4>
<a href="#" class="btn btn-primary full-button">Start a Registry</a><br />
<a href="#" class="btn btn-primary full-button">Find a Registry</a>
<p class="smallText">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</div>
</div>
<!-- End Slider Overlay -->
Here is the CSS styling for the slider:
/* Custom Slider Styles */
.carousel {
position:absolute !important;
}
div.signUp {
background:url(../img/trans-white.png) repeat;
border:1px solid #c5c5c5;
padding:20px;
border-radius:6px;
-moz-border-radius:6px;
-webkit-border-radius:6px;
}
.full-button {
width:92%;
text-align:center;
padding:10px 12px;
margin-bottom:12px;
}
p.smallText {
font-size:11px;
}
.sliderFeature {
padding-top:20px;
width:50%;
}
div#myCarousel {
border-bottom:4px solid #164466;
}