What We'll Learn

So you want to add a background? Well, there are several different kinds of backgrounds to choose from, including images, solid colors, gradients, slideshows, and videos. These options will change depending on if you are editing a section, column, or element.

To add/change a background for an element, go to Advanced >> Background. For a section or column, you’ll be going to Style >> Background. When you’re there, you’ll immediately notice the options “Normal” and “Hover.” Normal refers to how the background looks, well, normally; while Hover can allow the background to change when someone hovers their mouse over it. Note that you need to have both a Normal and Hover background set up in order for the Hover effect to work.

Solid Color & Image Background

First start by clicking on the “Classic” box next to Background Type. You now have the choice to add either a color or image background. Choosing color will give you a color picker popup, with your saved colors at the top and hue and opacity changers at the bottom. You can save your current color by clicking the plus button near the top.

When adding images, you’ll be asked to provide an image from your media library, or to upload a new one. To get your desired size and position, you’ll have to play around with the different options available.

Tip: setting Attachment to Fixed will give a very appealing scrolling effect.

Example of hover effect with solid colors (don’t forget to set a transition duration under Hover). 

This method works great when making buttons.

Gradient Background

A gradient is a smooth transition from one color to another, in either a straight line or radial direction. You can see popular examples of these in both Instagram and Hulu’s logos, and plenty of them can be found on this site. Modern examples often sport rather bright colors, but they can also be used with more subtle shades. Clicking the “Gradient” box next to Background will bring up several different options- start by choosing a color at the top of the section. Congratulations, you have a gradient! As for the other options, it’s actually easier for you to learn these yourself than to have them explained to you.

Slideshow & Video Background

This can look great for the front page of your site, as it’s an engaging way to show off your business. Text can be layered on top to introduce your business and tell your audience what you’re all about.

Delicious Food

This is an example slideshow, using a Ken Burns effect. 

Images are from Unsplash.com. Mae Wu- cookie basket, Patrick Fore- dough, Ales Krivec- cutting board with cookies.