We’re going to take a deeper dive into how
we configure backgrounds in DIFFERENT layouts We’ll talk about background colors and images (and all the advanced options regarding positioning and fixed, parallax scrolling), we’ll talk
linear and radial gradients and overlays. How we can use them to increase that legibility; increase
contrast with the click of a button). And then four more clicks of a button. Also, we'll cover background videos. But first, let’s start with background colors. To set a background color, set a background
color. But here’s the thing: there’s something
really useful here. There are times when we want our background
colors to be consistent throughout the project. This is where the Body (All pages) tag comes
in handy. If we select it from the dropdown, we can
make style changes that’ll be the new defaults for almost anything throughout the project. We can make changes not just to background
color (we can always go back in and change this later), but we can make complementary
changes, too. Because with a darker background and darker
text, we risk mass confusion and potentially panic. [Grimur] I literally just bought — I put
my credit card and I think they stole my — aaaahhhhh it’s just low contrast. As we already know, contrast is the measurement
of the difference between two things. Low contrast? Not so legible. High contrast? That’s much better. Extreme color clashing? [Stacy] [on phone] What’s that sound? [Grimur] MY EYES. [Stacy] Oh Grimur that's disgusting! [Grimur] No. No. It's Mariana. She's frying bacon. That’s background colors — what about
background images? Well this is where layering gets interesting. Regardless of whether you have a background
color SET already, you can add...an image. By default, when we go to choose an image
— whether it’s something we’ve already added to our Assets, OR if it’s something
we’re adding to our project here in real time... by DEFAULT, it’s going to look a bit tiled. That’s because the default is set to TILE. 2x takes the image’s default dimensions and cuts them in half – cuts the width in half, cuts the height in half. Sometimes this is the way to go, but usually for background
images, it’s color, cut, clarity — you know what? These are the notes from our lesson on diamonds. For BACKGROUNDS, it’s custom, cover, and
contain. Custom lets you specify an exact pixel value
(this is usually practical for tiled images), you can put in a % so the background ends
up scaling — this is now 120% the width of the element — and we can always position
these things, too (we can affect where the image is anchored). Cover scales the image proportionally — you
can still affect positioning, but notice how the image will always COVER the element. And that’s different from contain. In contain
the image is scaled...but nothing gets clipped or cropped off — the full image is CONTAINED
inside the element. For this one, let’s switch back to COVER. And before we move on, let’s show fixed. And fixed backgrounds we set to COVER? They work like this: The background image is now covering the entire
viewport. And that means it’s scaled up regardless
of the size of the selected element. But here’s what happens to ANY element with
a fixed background. It becomes a window. And however our element is sized or wherever
its positioned, it’s now serving as a window through which we can see our background. And here’s why this is so powerful: Suppose we have 3 sections. Each with a background image set to fixed. While the top section is in view, we can see
our background image. But here’s where it gets interesting. When we scroll to the second section? We’re now seeing ITS background image fixed
to the viewport. Same thing with the third section. And we can do this with text, too. Suppose we have different headings here, and
each of them have different Text fills set to Background. If we have background images? And those images are set to Cover? Making those background images fixed means
we have a knockout text effect that turns the headings themselves into a visual effect
that STILL respects scroll, but fixes the background to the viewport. So. That’s background images. Let’s go over linear gradients. By default, adding a gradient shows us two
stops. Of course, we can double click on a stop,
change its color to whatever we want — and, as expected, we can do the same with our second
stop. At any time, we can click on the gradient
to add additional stops, and we can click and drag to move our stops around. To delete a stop? Just click and drag out of the gradient. Now. What if we have a background image? Well, we can just stack a gradient on top
of it. And if we affect that color? (If we go into our stops and affect that color
and its OPACITY?) We can see right through the gradient (we
can SEE our background image right underneath). What about repeat? Well if we turn on repeat in this example, it looks
exactly the same. And there’s a reason for that. Repeating needs space OUTSIDE your stops. So if we move our stops around and create
space on the outside? Our gradient will now repeat EVENLY as many
times as it can within the extra space (outside of the range of your stops). That's linear gradients. What about radial gradients? Well let’s clear up something: the word
is gradate; not gradiate. As in: “radial gradients start from a center
color, and they gradate outward." And two things to cover regarding how radial
gradients WORK: The first is this: the center color (the color
at the center of the radial Gradient) is the one we see in our Gradient preview to the
left. And second (the second thing) we can move
the position of the focal point (the starting point where we want the gradient to radiate
from). Now. Everyone’s thinking the same two things:
One, “that sentence ended with a preposition.” And two, “none if it explains for what the
radius presets are.” A gradients span. That's the distance between the starting point and where the gradient ends. That whole thing is controlled by some tiny buttons which do different things. This would be a terrible time to end this lesson. Imagine if it just cut to bl— By default we have farthest corner. And as we adjust our focal point, the Gradient
will continue gradating outward until it hits the FARTHER corner. That one makes sense. Farthest side goes until it hits the farthest
side. Closest corner stops gradating until it hits the closest corner. Closest side...you get the idea. That’s radial gradients. Overlays are REALLY straightforward, but a
great way to differentiate a background that USUALLY has an image. If the text is hard to read? (Low contrast here?) Choosing overlay adds an overlay. (It stacks as another layer in our Backgrounds.) We can go in, we can change the color to whatever
we want, and we can control the opacity by controlling the opacity. That’s an overlay. Finally, we have background videos. This one’s a bit different, but it’s helpful
to think of a background video like you’d think of a section. That is, you can drag one right into your
Body element, and immediately upload a video you want to set as the background. And it’ll transcode (you can close this
out while it’s transcoding) — and treat the Background video like it’s just any
other section. In fact, we can transplant this container
(complete with all the elements inside) — we can put the whole thing right inside the Background
video. And when we preview? It looks pretty good...but what about that
contrast? Well, a couple options here: we can use a
gradient OR an overlay to stack on TOP of the Background video. This’ll give us better contrast between
the background...and the foreground. Now. Background videos have different experiences. There are different expectations for how they'll play on different devices so check out the full documentation on background videos over at Webflow University so you can really anticipate HOW the video's going to function. But that’s it. A lot to consider here: we can set a background
color by setting the background color, we can add images to our backgrounds which we
can configure however we want, we can add linear gradients. We can add radial gradients. We can add overlays to help increase the contrast
between the foreground and background, and we can add a background video. Which we’ve somewhat confusingly chosen
to demonstrate using this VERY lesson. Right before closing the window entirely,
leaving us with one final action: making Miguel’s desktop tolerable using Stacks in macOS.
