Making a GIF background for your landing page in Rails

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.

I spent a lot of time trying to use a short video that looped as the background for my landing page, but I learned that this can be problematic and quite complicated without JavaScript. As it turns out, using a GIF is much easier.

For the example below I chose a GIF from an animation because it seemed higher resolution, but you can use any GIF you want.

Original GIF created by @ramonmosermontes

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 landing.

rails g controller pages landing

Then, I added a landing route to connect the root page to the controller and the action.

# config/routes.rb
root 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:

Original GIF created by Besan777

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 /images folder.

Step 4: Adding the necessary HTML

I am sure there are many other ways to do this, but this is how I did it:

#app/views/pages/landing.html.erb
<div class="gif-wrapper">
  <h1 class="landing-title"> FUTURE </h1>
</div>

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.

#app/assets/stylesheets/application.css
.gif-wrapper {
    background-image: url(future.gif);
    text-align: center;
    line-height: 165vh;
    height: 100vh;
    background-repeat: no-repeat;
    background-size: cover;
    }
h1.landing-title {
    color: lightgrey;
    font-size: 60px;
}

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.