JEREMY OSBORN: In
today's Take Five,
you're going to make a scrolling
background image effect as seen
here.
This effect is similar
to the parallax effect
that can be found on many
places across the web,
such as this one.
Your version will be using
the CSS background size
cover and background
attachment fixed features,
as well as a sprinkling of
viewport height, or vh units.
Here's the project on CodePen
you'll be working with,
and here's the URL,
which you can also
find linked within the resources
section for this video.
In your HTML, you'll
see three divs,
each has the class of bg
and an individual ID name--
bg-1, bg-2, and bg-3.
And there's also a fourth div
with the class of content.
In the CSS, the div style
has a thin black border
to help you visualize
the divs, and the height
is set to 200 pixels.
The bg class has this
background-repeat value
set to no-repeat, which means
the images only show up once.
And then last,
notice that each ID
points to a background image.
Now I set the div height
to 200 pixels on purpose.
I wanted to show you
that it's not obvious
that the height of
all background images
are actually 550 pixels.
Increase the height of
the divs to 300 pixels
to reveal more image.
Increase it to 600
pixels, and you'll
see the entire image, as well
as an extra 50 pixels of space.
Now you'll be revisiting
that height in a second.
But first, center the
images in the bg style
by typing background
position center center.
Next, add the
background size property
and give it a value of cover.
The background size property
with the value of cover
scales the image as large as
possible without stretching
the width or height.
Now, if you're using
this technique,
here's some things
to be careful of.
If you take a small postage
stamp image like this one
and scale it up
to full page, it's
going to look like garbage.
On the flip side, if you
use a high resolution image,
it's going to look
great at full size
but your user pays a
performance penalty
by being forced to download
unnecessarily large images.
So please take the time to find
the right balance between image
quality and image size
for your projects.
Now back in your
project, you can
see how the images now cover
the entire span of the div
to the degree possible.
Go ahead and add this additional
height property and value
after the original
one-- height, 90vh.
So the 600 pixel value is being
left for fallback reasons.
A modern browser will use the vh
unit because its last in order.
An older browser that
doesn't support vh units
will ignore the vh unit and
use the 600 pixel value.
You may not be used to vh
units, so save your project
and go into the full-view
mode while I explain.
One vh unit is equal to 1%
of the viewports initial
containing block.
This means that 90 vh forces
the height of your divs
to 90% of the viewport
or browser window.
You can actually see this
in the full page view.
If you scroll all
the way to the top,
you can see the bottom
of the first div
ends here at 90% height.
This remaining 10% here is
the top of your second div.
Scrolling down, you
can see all your divs
will be the exact same height.
So now, change your
view back to the editor.
And you'll add the
real star of the show.
Go ahead and type
background-attachment fixed.
So the fixed value forces
the background images
to stay where they are.
If you save your document and
go into the full-view mode,
you can see this happening.
So it's kind of disorienting
but also kind of cool.
What's effectively happening
is the divs are moving
but the background images don't.
Keep in mind these are just
decorative background images.
There's no content
inside your divs.
We don't have time
to explore what
else you could do with that.
But as a quick example,
copy the very last div
and paste it between
divs 2 and 3.
And then go ahead and save
and preview in full view.
Now one major catch
to be aware of,
there's a big problem
with most mobile browsers
and this effect.
On canIuse. com, you can
see that the combination
of background attachment
fixed and background size
cover simply don't work on iOS.
There are some workarounds
to address this,
but we don't have time to
cover them in this video.
If you need to dive
into those fixes,
however, check our
resources section for help.
And that's it for now.
Thanks for watching.
If you like this video and
want to learn more CSS skills,
be sure to check out our other
Take Five videos, as well as
the rest of the course
catalog at Gymnasium.
