As a visual person learning Rails I wanted to make my landing pages more dynamic. This is the first thing visitors will see and it’s a great way to capture their attention.
For the example below I chose a GIF from an animation because it seemed higher resolution, but you can use any GIF you want.
In a few short steps I will show you how to make your very own dynamic landing page background!
Step 1: Create a Rails application
I called my new rails project
future based on the GIF I used. You can call yours whatever you’d like.
rails new future
Next, I created a static controller named
pages with an action called
rails g controller pages landing
Then, I added a
landing route to connect the root page to the controller and the action.
# config/routes.rbroot to: "pages#landing"
Step 2. Find a GIF
Honestly, this might be the longest step if you’re particular like me. A lot of GIFS are low resolution and may look pixelated on your landing page like the one below:
It’s still captivating, but I suggest googling high resolution GIFs and finding one you like. You can also look on one of the many GIF websites like Giphy, Gfycat, Tenor, GIFbin, or IMGflip. You can even try your hand at making your own GIF using websites like GIF maker or any of the infinite amount of GIF creating sites and apps out there.
Once you find a GIF you like, download the .gif file.
Step 3: Add the GIF to your assets pipeline
Next you need to go to
app/assets/images and add the GIF you downloaded there. You can do this however you’d like. I just dragged and dropped my GIF from my downloads folder on my computer into the
/images folder in VSCode.
If you are using VSCode you should see the GIF live and moving after you drop it into the
Step 4: Adding the necessary HTML
I am sure there are many other ways to do this, but this is how I did it:
<h1 class="landing-title"> FUTURE </h1>
I made sure to add a
"gif-wrapper" class and a
"landing-title" class so I could style the GIF and title in CSS.
Step 5: Adding the styling in CSS
This part is completely customizable. You will need to play around with it to figure out what styling is best for you and your project. I did it in such a way where the GIF is full screen and fits the size of the page. I also placed the
landing-title “FUTURE” on the bottom because that’s where it made the most visual sense for my GIF. You may want to place it in the center.
That’s all there is to it!
You now have a GIF background for your landing page in Rails. You can also add a background or other sized of GIFS to any page you’d like by tweaking the steps above to fit the needs of your own Rails application.
I would love to see all of your GIF backgrounds on your own Rails apps after trying out these steps. Leave links in the comments.