Skip to content

Instantly share code, notes, and snippets.

@LeeWarnock

LeeWarnock/random-giphy-bg.html

Forked from dmerand/random-giphy-bg.html
Created August 25, 2016 01:48
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save LeeWarnock/d871ba9b2a33153c99294f1f66eda225 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save LeeWarnock/d871ba9b2a33153c99294f1f66eda225 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