Question: I was trying to show a gif on my page and succeeded in showing it.

But now i want to show two gifs next to each other.
I was wondering is it possible to do so.

**CSS**

```
#loader {
 position: fixed;
 z-index: 1000;
 margin-left: 0%;
 margin-top: 0%;
 height: 100%;
 width: 100%;
 background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') 50% 50% no-repeat;
}

```

**HTML**

```
<div id="loader"></div>

```

**Jquery**

```
 $(window).load(function () {
   $('#loader').fadeOut(500);
 });

```

Now can i add one more `gif in background using url`???

I tried following but it does not seem to work

```
 #loader {
  position: fixed;
  z-index: 1000;
  margin-left: 0%;
  margin-top: 0%;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8 ) url('../Images/loading.gif') , url('../Images/ajax-loader.gif') 50% 50% ;
 }

```

Answer: 
Check the fiddle 

[HERE](http://jsfiddle.net/TShmm/1/)

Code

```
div#loader {
background-image: url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif'), url('http://www.misd.gov.sc/misdsd/Assets/programmer.gif');
background-repeat: repeat-y;
background-position: top left, top right;
width: 385px;
height: 100px;
border: 1px solid #000000;
}

```
You can have an element like this:

```
<div id="loader">
   <span id='loadtxt'></span>
</div>

```

then two css classes like this:

```
#loader {
    position: fixed;
    z-index: 1000;
    margin-left: 0%;
    margin-top: 0%;
    height: 100%;
    width: 100%;
    background: url('http://i837.photobucket.com/albums/zz296/sayalie30/loading.gif') 50% 50% no-repeat;
}
#loadtxt {
    position: fixed;
    z-index: 1000;
    margin-left: 0%;
    margin-top: 0%;
    height: 100%;
    width: 100%;
    background: url('http://lotyd.xtgem.com/images/bg-loading.gif') 50% 70% no-repeat;
}

```

you can adjust it as per your need.