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>
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.