Today I'm starting a new segment here on the WebStarts Channel that's all about adding fun little tidbits to your WebStarts website. I'm calling the segment "WebStarts Hacks". Normally I write a lot of blogs about how to build a professional looking website, driving traffic, and marketing yourself on the internet. WebStarts Hacks is all about fun stuff you can add to your website to make it creative and interesting.
The first one of these hacks I want to share with you is all about how to make an animated GIF or video as your website background. Here's how you do it.
1. Shoot a video.
For this example we're going to be taking a short video and turning it into an animated GIF. So pull out your phone or camera and shoot a short video. Try to keep your video around 5 seconds to ensure the file size won't be too big for the finished product.
2. Upload your video to GifNinja.com
GifNinja.com takes your videos and converts them to animated GIFs. The maximum file size you can upload is 20mb. So make sure you kept that video short. Once you've gone to GifNinja.com and uploaded your video you can adjust the playback speed and a couple of other settings. Once you have it the way you like it go ahead and click continue to process the video.
3. Download your animated GIF from GifNinja.com
Now that you've created an animated GIF with GifNinja.com you'll want to download it and then upload it to your WebStarts website. Click the download button to get your GIF from GifNinja. Please note GifNinja saves the file as HTML. You'll need to rename the file so it doesn't include the .html extension at the end of the file name.
4. Upload your animated GIF to WebStarts and set it as your full screen background.
If you don't have a WebStarts account click here to create one. Once you're logged in click on "Edit Site" from the dashboard. Next you'll want to upload your GIF by clicking on the add image icon on the toolbar and then clicking the button labeled "Upload Your Files From Your Computer". With the file uploaded to WebStarts go to File> Background > Image and apply the image with the "Fullscreen" radio button selected then click "Apply".
Congratulations - That's how to make an animated GIF as your website background.