Parallax image backgrounds, gradients, and video backgrounds

*CONTENT WARNING at 01:23 - this section may affect people with visual sensitivities. Viewer discretion is advised.
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. More than just CSS background colors. From CSS gradient backgrounds that induce euphoria to fullscreen video backgrounds and fixed backgrounds with parallax scrolling, we’ll cover everything you need to know about 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...
Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.
----------
Get started with Webflow: wfl.io/2r7cVUW
webflow.com
/ webflow
/ webflow

[@30888316413]

These are honestly so entertaining that I would them just for fun even if I wasn't learning Webflow

[@Grifanos]

Exactly 👍

[@tonidebcn]

This new kind of tutorials are SO SO MUCH BETTER than the old ones. It’s like I’m learning web design, not just the tool that sometimes may be overwhelming for the newbies. And this is what really matters. I just find the old videos dated because now I’m more consciously learning. The examples do stimulate my imagination, and that’s what I didn’t know I needed. You just need to marry me, and that would be all.

[@barbancha]

This are the best tutorial I ever saw on internet 😻😻

[@Webflow]

Thank you for your kind words, Alexandre Afonso!

[@ysteinWangen]

I never turn on the notification bell, except I do, except I don't, but when I do, it's Webflow.

[@paulrodriguez2177]

You guys should be making tutorial for everything. I'm not even learning Webflow at this time but I love these! 😂😂😂

[@flyingbrokenarrow]

Webflow tutorial videos are the gold standard of tutorial videos and should receive an Oscar for the best tutorial videos from the Academy of Motion Picture Arts, Sciences and Tutorial Videos.

[@olehansen6568]

Eventhough I know most of the stuff in these quick tutorials I never miss the chance to watch them as there are always some small (or big) nuggets to discover and learn about. Great work Webflow.

[@tonykey6453]

This should spawn somekind of show. Probably THE best tutorial videos I've seen from any product. Love the way this guy talks and the humour is bang on point.

[@knownoversight]

Just started using Weblow, literally a couple of hours ago, so this is the first tut video I've watched...and I have to say this is the first tut video I've ever laughed at, out loud.. And, it's the first tut video I want to share with friends. Bravo guys, what a great way to provide help and guidance.

[@strathmckay5347]

Man these are so good! The perfect mix of humour and clear explanation.

[@russianguy831]

Thank you for your amazing tutorials! You make lives of thousands people so much easier! I can honestly say that this website builder platform is revolutionary, keep up the good work!

[@dudedamnit]

I love this tutorials so much!

[@ErikHill1]

Hands down, best tutorial videos everrrrr

[@aristotendudi7648]

Always happy to watch your tutorial , always fun and easy to understand you're the best

[@podsmacked]

I actually really appreciate the Stacks tip! I completely forgot about that

[@solisinvictus4238]

THESE TUTS ARE AWESOME!!!

[@wh1tecl0ud]

I laugh over every lesson, I love you, man

[@elementsessence7368]

I love your tutorials. This guy is as dull & dry as he is hilarious!! Great job! And your COPY - OMG!!!! The best

[@LukasNiebel]

Haha great script, very well delivered and clear instructions. Keep up the great work guys 👍🏻

[@infiltretor287]

I LOVE this channel!!!

[@54CFL]

I love you guys! Webflow is a gamechanger

[@Grifanos]

Amazing Webflow, with amazing funny and helpful videos)

[@ChrisWittusen]

Great video and great humor

[@SinaNouri21]

These tutorials start so goood :)))) and funny btw That's why I'm so excited to watch webflow tutorials every day 😂😂

[@dastinliedke9251]

Love it!

[@Webflow]

*CONTENT WARNING at 01:23 - this section may affect people with visual sensitivities. Viewer discretion is advised.

[@georgeuxuidesign]

Your videos are unique.

[@2020davidg]

Brilliant!

[@shubhamparekh9808]

I'm eagerly waiting for the e-commerce

[@swaggerbauer]

yeah.. need to build a mini shop soon...

[@anetaroubickova8908]

Love these tutorials! Just a quick question: Is it possible to play video on scroll? Or it has to be a lottie?

[@Dianadesignenigma]

Thank you for the video! What size of the background image you can recommend? If I create the image on my own and can choose the size of canva ✨

[@aliagha5827]

I like how this is actually funny. :)

[@Enzocol89]

This guy is so damn hilarious 😂 😆 If this videos wouldn't be this much helpful I would just watch them for the jokes. Keep going the good stuff Webflow 👌🏻

[@asagoldstein1669]

What do we do about Safari completely butchering fixed backgrounds? I have to avoid or just layer fixed Div blocks which is a pain.

[@maddypape]

This is better than netflix binging for us UX designers

[@miltonsarkar5024]

Please make a video on how to autoplay video when its scrolls into view like facebook

[@sidneywong4816]

For the text image background (photography in the video), how to make it same background color with its parent section background color, while just the texts is transparent and overlay on the fixed background image?

[@KateCatalena-hw9nj]

how are these so funny. the diamonds part killed me

[@maximilianardenius2450]

Is this Ryan Renolds long lost brother? :O Love the tutorial!

[@oskrm]

When are we getting the Diamonds lesson? it's been 4 months!

[@balloonartisan]

🤣🤣🤣 hahaha... one of your best ones yet! I LOVE these!

[@preetdhillon5861]

i love you guys

[@garyvoigt321]

I watch these for pleasure and entertainment.

[@bennyd47]

Great content as always! It's missing mobile completely though - fixed backgrounds & videos are two of the biggest "gotchas" when transitioning your site to mobile browsers, and this video didn't even mention mobile 😬

[@Webflow]

Hi, bendrexl! Thanks so much for your kind words and your feedback. The article on Background videos is getting updated to match a lot of these gotchas. As seen at 7:27 in this lesson, this'll ensure everyone can get the most up-to-date information about how background videos behave on different devices (between iOS and Android updates, playsinline behavior seems to change every five minutes!). As for mobile, please stay tuned...we're working on something big for responsive design! If you're up for it, we'd love to learn more about fixed background behavior issues/gotchas you've experience on mobile to make sure it's something we cover moving forward. 🙇‍♀️

[@xed7188]

When I use Background Video to upload animation in mp4, the color has changed a lot. I don’t know what caused it. It’s the same with webm. How can I solve it?

[@markb.8460]

q. why is the default tile? are people using it more often?

[@markb.8460]

is that ux advice?am i working for free? is this a simulation?

[@ShxQDesigns786]

How did you make the navbar with the logo in the middle

[@joshuadiniz684]

You can set a max width on your navbar container!

[@mikepapahotel]

Hey Webflow - yet another awesome tutorial! I'm fairly new to Webflow and I'd love to examine how you did the 3 scrolling sections with their fixed BG images of the cushions from 2m:54s. Is that page available anywhere on webflow.io so that I could bring it in as a read-only to see how you did it? I've spent the last hour or so trying it for myself without success. Again - sincere thanks for all your brilliant tutorials - without doubt they're the best I've ever seen for teaching about/supporting any platform I've come across in the past 20 years!

[@Webflow]

Hi, Michael Hancock! We'll put something together and share it here ASAP (most likely Monday), as well as add that link to the lesson notes. Great idea!

[@mikepapahotel]

@@Webflow Many thanks guys - I appreciate that! 😊👍🏻

[@Webflow]

Hi ​@@mikepapahotel! Thanks for reaching out regarding the fixed parallax scroll background layout. The project is now available to open or clone to interact with the layout. Link to project: webflow.com/website/Fixed-backgrounds-with-parallax-scrolling?s=background-fixed

[@mikepapahotel]

@@Webflow OUTSTANDING!! Thank you again for your excellent support! 👌🏻

[@timmyhenrikssons]

The upload video function is gone (?) and now you have to embed videos?

[@Caden_Burleson]

Why is my linear gradient background tiling itself though?

[@njengathegeek]

"your credit card number ending in 2636 is ours" spare my rib 😂😂😂

[@Ms.Robot.]

Very nice. ❤️💋

[@RobertTrew]

Why still no options for stop and play on the BG video element?

[@Webflow]

That is actually possible. Stay tuned for a lesson on that here in the future.

[@oleww50]

“Frying bacon” 😂😂

[@madkernell]

Webflow university rocks.

[@jaredslaybaugh6856]

Can you address that fixed backgrounds don't work on mobile?

[@Webflow]

Hi Jared! Thank you so much for asking! Fixed background images take up a lot of rendering power on mobile or touch screen devices, which can cause a jarring scroll experience. An alternative solution is to use fixed positioning for image elements within a relative parent. Here's a workaround shared within the community: discourse.webflow.com/t/trouble-with-fixed-background-images-not-remaining-fixed-on-touch-screen-devices/26733/4?u=waldo

[@ajaymishra-jg2qe]

Please give me the name of tarcher I want to follow him personally Please please

[@ovalayacademy364]

WHY?!!!! WHY ARE YOU SO FUCKING AWESOME!!!!!!

[@pieteb_nl]

Where is this "hero visual" and "hero content" coming from? Have no idea what element is selected here. Are it images?

[@Webflow]

The hero image is a background image. kzbin.info/www/bejne/fanLk6usiq6ImpY

[@dmanprohere]

There is parallax image?

[@Webflow]

This part of the video that speaks about a fixed background may be what you are looking for: kzbin.info/www/bejne/fanLk6usiq6ImpY If this isn't it, here is another tutorial that might help: university.webflow.com/lesson/parallax-movement-on-scroll

[@smartfort2741]

Жаль что нет такой функции в мобильной версии

[@hsabes400]

I would bet every dollar I've ever seen this guy is a huge fan of John Mulaney

[@lobstergang1376]

3:25

[@yvessigner5503]

There is no "parallax" chapter in the lesson.

[@yvessigner]

This tutorial does't cover parallax background

[@AmirParvaFa]

😂😂😂 I forgot why I came here...