如何使用兩個背景圖像

Question

我在我的網站中使用Bootstrap模式。我想用兩個圖像作爲背景。我能夠成功地使用一個圖像。當我試圖包含我面臨問題的第二張圖片時。

我的第一張圖片出現在整個模式上，第二張圖片很小，但我希望它出現在第一張圖片的頂部。第一個圖像

我的CSS代碼是

.modal-content{ 
    background-image: url("{% static "markatix/imgs/modal/bg.png" %}"); 
} 

我試圖解決在this question但是當這樣寫我的第一個圖像也消失了。

我也試過

.modal-content{ 
    background-image: url("{% static "markatix/imgs/modal/bg.png" %}") ,url("{% static "markatix/imgs/modal/bg2.png" %}") ; 
    background-repeat: no-repeat,no-repeat; 
    background-position: center, center; 
} 

但是它顯示我只有一個圖像。

Answer 1

這裏閱讀：http://www.w3schools.com/css/css3_backgrounds.asp

#example1 { 
 
    background-image: url(http://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg), url(https://s-media-cache-ak0.pinimg.com/originals/f5/9b/1b/f59b1b0cc430702e82dea90780d7f87d.gif); 
 
    background-position: right bottom, left top; 
 
    background-repeat: no-repeat, no-repeat; 
 
    background-size: 20%, 20%; 
 
    height: 100vh; 
 
    width: 100%; 
 
}

<div id="example1"></div>

Answer 2

您應包括有關頂部的另一個DIV這個

您可以通過調整外部的墊襯調整位置和內部一個規模一個

.main-div{ 
 
     margin:0; 
 
     padding:50px; 
 
     width:300px; 
 
     height:200px; 
 
     background-image:url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Geres1.jpg/480px-Geres1.jpg"); 
 
     background-size:cover; 
 
     background-repeat:no-repeat; 
 
     background-position:center; 
 
    } 
 
    
 
    .overlay-div{ 
 
     margin:auto; 
 
     padding:0; 
 
     width:100%; 
 
     height:100%; 
 
     background-image:url('https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Venus_globe.jpg/480px-Venus_globe.jpg'); 
 
     background-size:cover; 
 
     background-repeat:no-repeat; 
 
     background-position:center; 
 
    }

<div class="main-div"> 
 
     <div class="overlay-div"> 
 
     </div> 
 
     </div>