Skip to content

Instantly share code, notes, and snippets.

@raybogman

raybogman/random-giphy-bg.html

Forked from dmerand/random-giphy-bg.html
Created January 16, 2017 19:11
Show Gist options
  • Save raybogman/856766d16eee88029e5f43aadea8b6d7 to your computer and use it in GitHub Desktop.
Save raybogman/856766d16eee88029e5f43aadea8b6d7 to your computer and use it in GitHub Desktop.
Download ZIP
HTML Template for Random Animated Gif Background Using Giphy
Raw
random-giphy-bg.html
<!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>
Raw
random-giphy-pug-version.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