Experts Exchange connects you with the people and services you need so you can get back to work.

gif overlay

Hi,

I am dynamically replacing a background image of an span element with a gif file on page load. and showing back the original image when the gif is played fully once using jquery.

While hiding gif and showing back the original background image, there is a white background showing up. How to make it transparent, or remove it?

thanks.

Perumal_RMAsked: 2016-11-21

Who is Participating?

LVL 83

leakim971PluritechnicianCommented: 2016-11-22

try this :

<div id="container">
  <div class="page-takeover-gradient" style="display: block;">
        <picture class="hidden-lg">
          <source media="(max-width: 768px)" srcset="mobile-768x460.jpg">
          <img srcset="" class="img-responsive">
        </picture>
  </div>
  <div class="overlay-gif-inside">
    <img src="/path/to/your/filename.gif" />
  </div>
</div>

Open in new window

css :

#container {
  position: relative;
  width: 768px;
  height: 460px;
}
.page-takeover-gradient, .overlay-gif-inside {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.overlay-gif-inside {
  z-index: 10000;
}
.overlay-gif-inside img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Open in new window

Perumal_RMAuthor Commented: 2016-11-21

I have fixed this with placing an image element inside the <Span> tag. Now the issue is with the small screen devices.

<div class="page-takeover-gradient" style="display: block;">
      <picture class="hidden-lg">
        <source media="(max-width: 768px)" srcset="mobile-768x460.jpg">
        <img srcset="" class="img-responsive">
      </picture>
</div>

Open in new window

is my code for the banner, I want to overlay a gif over the banner. How should I do this. any help much appreciated.

Thanks.

LVL 64

Julian HansenCommented: 2016-11-22

Can we see more code.

How do you want to overlay the gif - over the whole page or just part of it. It is not clear from your question what the requirement is.

BTW not all mobile devices support the srcset attribute. You can't rely on it currently to be available in all browsers.