ブートストラップ3/4で反応性の壁紙広告を作成するには？

Question

私は、画像に与えられた何かのようなウェブサイトに壁紙広告を追加しようとしています。私はbackground-size：100％autoを使用してみましたが、hereから同様の質問に基づいています。コンテナにコンテナを入れてみましたが、レイアウトが合わないだけです。この要件は、withが991より小さくレイアウトが変更されるまで、イメージをコンテンツにフローティングさせることです。私はいくつかの他のフレームワークがこのためのクラスを持っていることを知っているが、私はそれを動作させることができない。私が試したものの

例：これは上の非常に大きなスクリーンを作品

。

html, body { 
    background:url(images/static/rollup_web.png) no-repeat center center fixed; 
    -webkit-background-size: 100% auto; 
    -moz-background-size: 100% auto; 
    -o-background-size: 100% auto; 
    background-size: 100% auto; 
} 

<div class="container"> 
    @yield('content') 
</div> 

これは、前のコードとほぼ同じ効果生成します。

background-size:100% auto; 

これはかなりハックですが、私は左を展開する場合、私は、大丈夫ですが、画像が小さすぎて結果を取得し、私のコンテンツよりも右側の列はあまり金切り声さ：

<div class="container-fluid"> 
    <div class="row"> 
    <div class="col-sm-1"> 
     <!--Left Image of the wallpaper --> 
    </div> 

    <div class="col-sm-10"> 
     @yield('content') 
    </div> 

    <div class="col-sm-1"> 
     <!--Right Image of the wallpaper --> 
    </div> 
    </div> 
</div> 

Answer 1

使用jQueryのライブラリをBackstretch のように彼らはクールな応答IMAGを持っているのに十分強力ですすべての画面の背景に電子

Answer 2

私がブートストラップのグリッドを破ることなく、いくつかのCSSの行でそれを解決するために管理している同様の問題を得る誰かが見つかりました。解決策は、画像の中央が実際にコンテナの幅1126ピクセルの空白スペースであるPhotoshopで準備されたイメージを持つ必要があります。コンテナ

<div class="wallpaper-ad"> </div> 

<div class="container"> 
    <div class="row"> 
     <!-- Content goes here --> 
    </div> 
</div> 

の外に画像を入れて、このためのスタイルがある：あなたが使用されるHTML/CSSコードの例を

.wallpaper-ad { 

    background: url(../images/static/image.png) no-repeat center center scroll; 
    height:1300px; /* Depends on the image */ 
    width: 100%; 
    position: absolute; 
    z-index: -999; 
} 

@media only screen and (max-width:991px) { 
    .wallpaper-ad { 
     display: none; 
    } 
}