How to use two background images

Question

I am using a Bootstrap modal in my website. I want to use two images as a background. I am able to use one image succesfully. When I try to include a second image I facing issues.

My first image appears on the whole modal and the second image is small, yet I want it to appear on top of the first image.

My CSS code for the first image is

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

I tried the solution in this question but when written like this my first image also disappears.

I also tried

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

However it shows me only one image.

Can you post your HTML code please – jean-max Dec 12 '16 at 08:19 — jean-max, Dec 12 '16 at 08:19

score 1 · Accepted Answer · answered Dec 12 '16 at 08:22

1

Read here: 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>

answered Dec 12 '16 at 08:22

hdotluna

5,514
4
20
31

Please don't use W3Schools as a resource. They are often outdated in their guides, and sometimes even completely wrong. Try using a more reliable source such as [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds) – Rory McCrossan Dec 12 '16 at 08:28
1

Here is another, more reliable source: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds And here is the browser compatibility: http://caniuse.com/#feat=multibackgrounds – Mr. Hugo Dec 12 '16 at 08:33

score 1 · Answer 2 · answered Dec 12 '16 at 08:32

You should contain another div on top of this one

you can adjust position and size of inner one by adjusting paddings of the outer one

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

I think there is a big difference in browser-compatibility with the other multiple css background solution... I think this works 100% of the times and the other solutions fails quite often. Do you happen to know specifically what the difference is? — Mr. Hugo, Dec 12 '16 at 08:39

How to use two background images

2 Answers2