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:
Who is Participating?

[Webinar] Streamline your web hosting managementRegister Today

x
 
leakim971Connect With a Mentor PluritechnicianCommented:
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

0
 
Perumal_RMAuthor Commented:
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.
0
 
Julian HansenCommented:
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.
0
All Courses

From novice to tech pro — start learning today.