<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=301393330220905&amp;ev=PageView&amp;noscript=1">
CS3 Design Tips and Tricks: Section Background Images Blog Feature

By: admin on July 1st, 2015

Print/Save as PDF

CS3 Design Tips and Tricks: Section Background Images

Clover Sites 3 | Company News

First, a real quick update on Clover Sites 3 beta - over 2,000 of you have received your beta invite emails to Clover Sites 3 so far and the response from everyone has been so great. We've made even more improvements based on your feedback and we're really enjoying getting to see what you're creating!

We wrote a help article that offers some tips and tricks you can use to make your website really stand out. Since our beta release, many of you have been asking questions in regards to handling section background images, and since this help article answers these questions directly, we thought we'd highlight them in a blog post!

We're planning on adding a few more of these posts in the future, especially as we see you guys doing cool and creative things with your websites. Here are a couple of helpful tips and tricks with your section background images:

1) Adding Unique Scrolling Motion (Parallax) To Your Site

One thing that's popular right now is parallax scrolling, which adds really fluid motion to your images whenever you scroll up or down a page (to see how this works, scroll through the homepage of our Bloom demo site). We made sure this was not only included in Clover Sites 3, but is also really easy to access and use in any site design and any section.

One of the easiest ways to do this is to place a section with no text or additional content in-between two other sections and add a large background image to the middle section.

Screen Shot 2015-06-30 at 10.21.38 AM

Once you've done that, you can go to section settings and choose "fixed parallax" from your background photo options.

After you click "Save", you should be able to see the background image saved in your Greenhouse. Click the "Preview" button to see the parallax working as your visitors will see it.


2) Using Animated Content in a Section

Ever since we placed the above image on our website, we've had a bunch of you asking how we were able to add animation to a section like this. Although it looks like we've put a video behind a donation section, that is actually an animated GIF playing in the background.

Adding a GIF as a background image is really easy - simply place a .gif file as your background image for any section. Just make sure the image isn't too distracting or it may take away from the content on your page! For a step-by-step look at how to add a GIF, check out our full help article.


You can get more help with site design tips and tricks here.

And of course, we’re continuing to roll out early access to Clover Sites 3 over the next two weeks - so if you haven’t received your invite yet, keep an eye out for that. And to those of you who never signed up for the beta launch, you can get full access to Clover Sites 3 when we officially launch in July!