如何在Bootstrap 3/4中創建響應式壁紙廣告？

我正在嘗試將壁紙廣告添加到看起來像圖片上的某個網站。我曾嘗試使用背景大小：100％自動從here類似的問題，我甚至嘗試把一個容器內的容器流體，但佈局不適合。要求將圖像浮動到內容，直到with小於991並且佈局更改。我知道一些其他的框架有這個類，但我不能讓它工作。什麼，我已經試過如何在Bootstrap 3/4中創建響應式壁紙廣告？

例子：

這僅適用於非常大的屏幕。

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>

來源

2016-06-16 Nermin Sehic

你有HTML/CSS代碼的例子嗎？ – Tjoene

我已經添加了代碼示例，儘管我已經清楚地說明了我在嘗試解決此問題時使用的兩個概念。因爲這個問題，並不真正看到投票的問題。 –

-1

使用jQuery庫，例如Backstretch 他們足夠強大，有清涼響應IMAG e在任何屏幕的背景

來源

2016-06-16 05:24:05

如果有人發現有類似的問題，我已經設法解決它，而不會破壞Bootstrap網格和幾行CSS。該解決方案需要在Photoshop中準備好圖像，其中圖像的中間部分實際上是容器寬度爲1126px的空白區域。把圖像容器

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

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

而對於這種風格的外面是：你用

.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; 
    } 
}

來源

2016-06-17 11:10:57

如何在Bootstrap 3/4中創建響應式壁紙廣告？

回答

相關問題