Solved

gif overlay

Posted on 2016-11-21

1 solution

Medium Priority

79 Views

Last Modified: 2016-11-23

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.

Comment

Question by:Perumal_RM

[X]

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

Join The Community

3 Comments

Author Comment

by:Perumal_RM

ID: 418970542016-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 58

Expert Comment

by:Julian Hansen

ID: 418979042016-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.

LVL 82

Accepted Solution

by:leakim971

leakim971 earned 2000 total points

ID: 418979652016-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

Featured Post

Question has a verified solution.

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

A Stupidly Simple and Tiny Lightbox Script

Article by: Gary

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…

jQuery

Simple animation using JQuery

Article by: Julian

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…

jQuery

PHP, jQuery, and Form Actions

Video by: Marco

The viewer will learn how to dynamically set the form action using jQuery.

Introduction to jQuery (Part 1)

Video by: Jason

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)