gif overlay

Posted on 2016-11-21
Medium Priority
Last Modified: 2016-11-23

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?

Question by:Perumal_RM
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

Author Comment

ID: 41897054
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">

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.

LVL 58

Expert Comment

by:Julian Hansen
ID: 41897904
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.
LVL 82

Accepted Solution

leakim971 earned 2000 total points
ID: 41897965
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">
  <div class="overlay-gif-inside">
    <img src="/path/to/your/filename.gif" />

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


Featured Post

How to Create Failover DNS Record Sets in Route 53

Route 53 has the ability to easily configure DNS record sets specifically for failover scenarios. These failover record sets can be configured to failover to full-blown deployments in other regions or to a static HTML page that informs your customers of the issue.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month11 days, 17 hours left to enroll

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question