Skip to content

Instantly share code, notes, and snippets.

@dmerand
Last active March 31, 2021 03:05
Show Gist options
  • Save dmerand/4ca44c2c34de1cb39a6a to your computer and use it in GitHub Desktop.
Save dmerand/4ca44c2c34de1cb39a6a to your computer and use it in GitHub Desktop.
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>
Copy link

ghost 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