How to add gif to background

Question

I've used the following CSS and I wonder if I can change the background to use some gif i.e. instead of background:white use the following gif as background http://media.giphy.com/media/8OUdE03f3Nauc/giphy_s.gif

#carousel figure {

    display: block;
    position: absolute;
    width: 150px;
    height: 111px;
    left: 10px;
    top: 10px;
    background: white;
    overflow: hidden;
    border: solid 1px black;

}

ive tried with background: url('http://media.giphy.com/media/8OUdE03f3Nauc/giphy_s.gif');

and also this

background-image:'http://media.giphy.com/media/8OUdE03f3Nauc/giphy_s.gif' which is not working...

w3schools.com/tags/tag_figure.asp hi dear, please read it http://stackoverflow.com/questions/7913359/can-figure-tag-in-html5-be-used-for-background-images — Prashant, Oct 12 '15 at 10:14

score 0 · Answer 1 · answered Oct 12 '15 at 09:41

0

You should be able to do the following:

#carousel figure {

display: block;
position: absolute;
width: 150px;
height: 111px;
left: 10px;
top: 10px;
background: url('http://media.giphy.com/media/8OUdE03f3Nauc/giphy_s.gif');
overflow: hidden;
border: solid 1px black;

}

answered Oct 12 '15 at 09:41

evilscary

2,097
5
23
33

I try it and it doesnt work for me what could be the problem? – Oct 12 '15 at 09:46
you might need to download the gif and put it in a local folder – evilscary Oct 12 '15 at 10:01

score 0 · Accepted Answer · answered Oct 12 '15 at 09:44

0

Try like this: Its working Demo

#carousel  {       
    background: white url("http://media.giphy.com/media/8OUdE03f3Nauc/giphy_s.gif") no-repeat center; 
// Added your gif background along with your code */
}

answered Oct 12 '15 at 09:44

G.L.P

7,119
5
25
41

I try it and it doesnt work for me what could be the problem? – Oct 12 '15 at 09:46
1

post your relevant html / css code to help you better – G.L.P Oct 12 '15 at 09:47
ive added the no-repeat-center and now it works :) thank you 1+ – Oct 12 '15 at 09:48
1

If my code helped you accept that as answer, that will help others who is looking for same kind of solution :) – G.L.P Oct 12 '15 at 09:52

How to add gif to background

2 Answers2