html - 画像を中央に配置し、エッジを切り取る Twitter Bootstrap

Question

Twitterブートストラップを使用してWebサイトを作成しています。ここにプレビューがあります:プレビュー

全幅の背景スライダーを作成しようとしています。1100px を超える解像度でプレビューしている場合、問題なく表示されます。しかし、ブラウザー ウィンドウを縮小すると、画像がウィンドウの中央に配置されて端が切り落とされるのではなく、左に配置されたままになることに気付くでしょう (これが私が望んでいることです)。これを修正しようとしましたが、解決策が見つかりません。アイデアをいただければ幸いです。

スライダーのコードは次のとおりです。

<!-- 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 -->

ここに私のCSSがあります:

    /* Slider */
.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;
}