將背景圖像作爲新節添加到引導程序站點

一直試圖將背景圖像添加到Bootstrap網站。我正試圖將它夾在兩個現有的部分之間。將背景圖像作爲新節添加到引導程序站點

當使用背景圖像檢查許多主頁時，它們具有類，但也包含HTML中的樣式代碼以及CSS。

這是事情我想補充的類型，不包括滑塊 http://themesquared.com/flathost（DIV類的超大屏幕報頭） http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg

要那麼一些疊加文字的背景圖片，我需要在此順序：容器，行類，背景圖像類，覆蓋文字類與col colg

是CSS和HTML與背景圖像需要的樣式嗎？

<div class="solution5"> 
<div class="container"> 
<div class="row"> 
<div class="col-12"> 
<div class="col-6 push-1"><a href="/link1"> 
<h1>Link text</h1><h2>2nd text block</h2> 
<a href="/link2" class="Link2">Up to 40% off</a> 
<a href="/link3" class="Link3">Discover more</a> 
<a href="/link4" class="col-3 push-1"><ul class="Link4"><li>Free Bag</li>  <li>Free Delivery</li></ul></a> 
</div> 
</div> 
</div> 
</div> 
</div>

.solution5 { 
width: 100%; 
height: 100%; 
opacity: 1; 
visibility: inherit; 
z-index: 20; 
background-image: url(http://example.com/img/solution5.jpg); 
background-color: rgba(0, 0, 0, 0); 
background-size: cover; 
background-position: 50% 0%; 
background-repeat: no-repeat;

來源

2015-10-19 Melda S

用你試過的軟件創建一個演示程序？ –

不，只是添加'background-image：url（'yourimage.jpg'）;'在你想用css添加背景的部分 –

你的意思是這樣的：

.solution5 { 
    background: url('http://themesquared.com/flathost/wp-content/uploads/2015/03/header-bg.jpg'); 
    background-size: cover; 
}

演示 - >http://jsfiddle.net/mmcgaweb/

關於background-size: cover;從MDN：

封面：與contains相反的關鍵字。將圖像縮放至儘可能大並保持圖像寬高比（圖像不會變爲）。圖像「覆蓋」容器的整個寬度或高度。當圖像和容器具有不同的尺寸時，圖像將被剪裁到左/右或頂部/底部。

來源

2015-10-19 13:27:13 davidkonrad

將背景圖像作爲新節添加到引導程序站點

回答

相關問題