Pausing background gifs/videos

Question

I’ve been playing around with html, css and JS lately. Right now I have a div that has a background gif. This is what I did:

<div class = "mydiv" style = "background-image: url(play.gif);"></div>

So first, it fills the entire space by repeating the image over and over side by side. I was wondering if there was a way to only have the image show up once and at the center of the div.

Another question I have is if it is possible to “pause” the gif at the beginning and only play it when the user hovers over the div and when they hover-off the gif goes back and stays at the beginning. If this is not possible for gifs, is it possible for videos (.mp4 .webm etc.)

https://developer.mozilla.org/en/docs/Web/CSS/background-repeat — Marc B, Jun 16 '16 at 19:11
can you put your code JSFIDDLE.It will help to suggest the best proficient answer.! — iyyappan, Jun 16 '16 at 19:12
No this is not possible with an actual background image. The image would need to be inline. — Paulie_D, Jun 16 '16 at 19:12
@4castle: "was a way to only haev the image show up once and at the center of the div". — Marc B, Jun 16 '16 at 19:13
@Paulie_D I don't have much code. All i really have is that html and some css to align everything — Allen Huang, Jun 16 '16 at 19:17

score 1 · Accepted Answer · answered Jun 16 '16 at 19:34

1

To the first part of your question, yes you can have it show up once in the center. Here is an example.

.mydiv{width:100%;
      height:100vh;
  background-image:url(http://bestanimations.com/Animals/Birds/Penguins/animated-penguin-gif-5.gif);
  background-repeat:no-repeat;
  background-position: center center;}

<div class="mydiv">
</div>

answered Jun 16 '16 at 19:34

Rachel Gallen

25,819
19
69
75

1

you can of course adjust the width/height as required – Rachel Gallen Jun 16 '16 at 19:34
to 2nd part of question see http://stackoverflow.com/questions/7473117/animating-a-gif-on-hover – Rachel Gallen Jun 16 '16 at 19:46
also http://stackoverflow.com/questions/20644209/play-gif-on-mouseover-and-pause-gif-on-mouse-out-without-replacing-images – Rachel Gallen Jun 16 '16 at 19:47
Dunno about the play once, but you can 'freeze' the animation like so http://jsfiddle.net/RachGal/33Sqd/15/ - i haven't coded the resume – Rachel Gallen Jun 16 '16 at 19:57
you could always just create the gif without the loop option in the first place, that would solve your problem.. if its one that's ready-made, it can probably be adjusted in Adobe Fireworks – Rachel Gallen Jun 16 '16 at 20:05
Note the `vh` is CSS3 and your mileage may vary on the use of the viewport units. "vh - 1/100th of the height of the viewport." Note issue mainly on older browsers/mobile. – Mark Schultheiss Jun 16 '16 at 20:19
@MarkSchultheiss i made a point of remarking "adjust width/height as required" .. i don't know the size of his div. – Rachel Gallen Jun 16 '16 at 20:21
Yep, I noted that +1 anyway due to the good comments you made :) – Mark Schultheiss Jun 16 '16 at 20:22

score 0 · Answer 2 · answered Jun 16 '16 at 19:30

0

You could use something like this:

.mydiv {
    background-image: url(static.gif);
    background-repeat: no-repeat;
    background-position: center;
}

.mydiv:hover {
    background-image: url(play.gif);
}

where static.gif would be just the first frame from your gif.

answered Jun 16 '16 at 19:30

Schlaus

15,686
10
31
62

Thanks, is there anyway to make the gif play only once as well? – Allen Huang Jun 16 '16 at 19:39
@AllenHuang Not with css, no. It can be done with javascript, but requires quite a bit more work. – Schlaus Jun 16 '16 at 19:44
If it's not too much trouble, could add how to do that to your post? – Allen Huang Jun 16 '16 at 19:47

Pausing background gifs/videos

2 Answers2