CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Richa
Richa

Reputation: 3289

Showing two gifs using CSS

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

Upvotes: 0

Views: 1471

Answers (3)

Jai
Jai

Reputation: 74738

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.

Upvotes: 1

Pratik Joshi
Pratik Joshi

Reputation: 11693

Check the fiddle

HERE

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

Upvotes: 2

dwana
dwana

Reputation: 413

CSS3 does support multiple backgrounds (http://www.css3.info/preview/multiple-backgrounds/) check out the examples below

Upvotes: 0

Related Questions