Working with Section Backgrounds
In this lesson we are going to:
Learn how to create and add a patterned background
Explore background image effects and layering
Section backgrounds are the not-so-blank canvas of our websites. They tell a story, sometimes with the utmost subtlety that they may even go unnoticed. Sometimes the story they tell is intentionally quite loud. When you know how to turn the volume of the background story up and down, you understand how your website has the power to 'interact' with your audience and guide their experience on your web.
Creating an immersive experience is done by layering in different design touch points. They are the same, but different. Even for the more subtle, minimal designs, your choice of color and where it is used, what acts as an occasional flourish and where... is all layering in the design and guiding how it will be experienced. Work with the idea of guiding others through the design of your site.
Where do you want them to look and when?
Are they meant to drift along with absolute fluidity, then BAM, look over here, look at this shiny thing? Or should they feel held and supported from start to finish?
No matter the journey you wish to take them on, it begins with the bassline of section background. Here are some of the methods you can use to take them there.
What you should know after this step:
Understand what options are available for section backgrounds and how to apply them.
How to repeat section types throughout the page and website, to create cohesion and a truly branded feel.
How to create a 'paralax' effect when using an image as a section background.
How to create and use a repeating pattern as a section background.
How to add and adjust a photo grid section.
How to use and adjust section dividers and section sizing.
Action Steps:
Set up each section on your home page with a background.
Review the entire home page, top to bottom and back again, to ensure it has a design through line and the section backgrounds look/feel cohesive together.
Consider playing with some of the other options from the demo, in order to understand how to use them in the future.
