Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
HTML Template for Random Animated Gif Background Using Giphy
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function() {
var xhr = $.get("http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC");
xhr.done(function(data) {
$('.gif-bg').css('background-image', 'url(' + data.data.image_url + ')');
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
}
.gif-bg {
background:url('') no-repeat center center;
width:100%;
height:100%;
min-height:100%; /* for mobile and tablets */
background-size:cover;
padding: 25px;
position:absolute
}
</style>
</head>
<body>
<div class="gif-bg">
</div>
</body>
</html>
<!-- this version only shows pug gifs -->
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function() {
var xhr = $.get("http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=pug");
xhr.done(function(data) {
$('.gif-bg').css('background-image', 'url(' + data.data.image_url + ')');
});
});
</script>
<style>
body {
margin: 0;
padding: 0;
}
.gif-bg {
background:url('') no-repeat center center;
width:100%;
height:100%;
min-height:100%; /* for mobile and tablets */
background-size:cover;
padding: 25px;
position:absolute
}
</style>
</head>
<body>
<div class="gif-bg">
</div>
</body>
</html>
@ghost

This comment has been minimized.

Copy link

commented Feb 24, 2017

Hello, your script is great so thank you very much but being a beginner I can not adapt it for the use I want to make. I would like it to be a simple gif generator with their original size (or zommed a little bit if they are too small) and not a background or banner one, just a gif generator, can you help me a little bit with this problem please? Thank you

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.