In this article, we will show you how you can apply a background to any section of your page. If you are not sure how to edit a section, please refer to our article here providing a basic overview of sections.
There a total of 4 different background options available. Image, Color, Gradient, and Video. In this article below we will take a look at each background type and what different options are available for each.
Here you can select an image from your Snappages library or upload a new file to fill the section.
Once you have selected your image you will be given a couple of customization options for your background.
You are able to resize what portion of the photo you want for the background, repeat the background, set an attachment for the image, enable tint, and parallax effect.
*Parallax is the effect of the photo moving while scrolling.
(If parallax is enabled attachment and size options are disabled)*
Best Practices for Background Images
Snappages sections are dynamic and are able to scale for different devices. While there are no set dimensions for the background image, here are some tips you can use when adding backgrounds to Snappages.
Recommend image size is 1920 x 1080 pixels
Use an aspect ratio of 16:9
Ensure your image is web compressed, large files can cause a slow down on your site.
Avoid having too much text on a background. If you have any information you want to pass on to your visitors, we recommend an image block.
Use stock images.
If you have any trouble with background images we do recommend consulting with a website designer.
Here are some available resources for stock images and resizing tools.
Color / Gradient
You can either select a single color or create a customized gradient.
With the gradient background type, you are able to create your own gradient.
Selecting the colored squares on the color bar will allow you to change the angle of the gradient and color. The plus sign next to the color bar will allow you to add more colors to the gradient.
A great introduction for a first-time visitor is a video background. The video background option enables you to embed a video.
(if you are a Subsplash client you will be able to upload a video.)
A great example of a video background can be found on the Interbay community church home page, notice how the video itself contains the logo of the church.
You can also set a "Mobile background" so the video does not play on mobile devices. Video backgrounds on mobile devices can cause longer load times.
If you have any questions, please feel free to start up a chat with us using the "questions mark" on the upper right-hand corner.