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