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