CSS backgrounds in 2020 — parallax images, gradients, and videos

Backgrounds have evolved significantly since the teal days of Windows 95. Today, dynamic backgrounds can not only grab your attention, but serve to create an unforgettable web design experience. Unless you’ve created a background that induces hypnosis or any kind of reduced awareness that might lead users to forget your web design experience. More importantly, backgrounds are essential to forming a website’s look and feel. They can establish meaningful groupings to content, meaning they directly affect your design’s usability, navigability, accessibility, and other words that end in -ability. What’s in this lesson? A whole lot about backgrounds. From radial gradients that induce euphoria to fixed backgrounds with parallax scrolling, we’ll cover everything you need to know about web backgrounds in a real web design context: 00:00 - Introduction 00:32 - Background color (with the Boady ll pages tag) 01:34 - Set a background Background image on an element 04:03 - Linear gradient 05:07 - Radial gradient 06:20 - Color overlay 06:43 - Background video 00:00 - Recap Learn more about backgrounds and background videos: university.webflow.com/lesson/background-styles-overview ---------- Get started with Webflow: https://wfl.io/2r7cVUW https://webflow.com https://twitter.com/webflow https://facebook.com/webflow