WEBVTT

1
00:00:00.000 --> 00:00:02.260
[treehouse presents]

2
00:00:02.260 --> 00:00:05.670
[Multiple Background Images In CSS with Guil Hernandez]

3
00:00:05.670 --> 00:00:07.160
Hi, everyone, I’m Guil.

4
00:00:07.160 --> 00:00:09.910
In this Treehouse quick tip, we’ll learn how to apply multiple

5
00:00:09.910 --> 00:00:13.510
background images to an element with just one CSS declaration.

6
00:00:13.510 --> 00:00:15.450
Let’s get started.

7
00:00:15.450 --> 00:00:18.210
With the multiple background CSS3 feature,

8
00:00:18.210 --> 00:00:22.310
we can build multilayer backgrounds using the background CSS property.

9
00:00:22.310 --> 00:00:25.770
If you’ve already applied a background image to an element in the past,

10
00:00:25.770 --> 00:00:30.350
then you already know how to attach multiple background images with CSS3.

11
00:00:30.350 --> 00:00:33.860
It’s just as easy as separating each background value with a comma.

12
00:00:33.860 --> 00:00:36.070
So let’s take a look at a simple example.

13
00:00:36.070 --> 00:00:40.120
So far we only have this textured background image applied.

14
00:00:40.120 --> 00:00:42.690
So in our CSS, let’s go ahead add

15
00:00:42.690 --> 00:00:45.110
two more background images to our div.

16
00:00:45.110 --> 00:00:50.050
We’ll do this by separating each background image value with a comma.

17
00:00:50.050 --> 00:00:52.770
So here we added two more background image values

18
00:00:52.770 --> 00:00:54.460
to our background property.

19
00:00:54.460 --> 00:00:56.550
And when we refresh the page,

20
00:00:56.550 --> 00:00:58.420
you can see how each value generates a

21
00:00:58.420 --> 00:01:01.150
separate background image layered atop one another.

22
00:01:01.150 --> 00:01:04.849
It’s important to remember that the first image listed

23
00:01:04.849 --> 00:01:08.070
will be the top image layer rendered closest to the viewer,

24
00:01:08.070 --> 00:01:12.320
and the last image listed will be at the very bottom.

25
00:01:12.320 --> 00:01:15.740
The ones in between will be layered in subsequent order.

26
00:01:15.740 --> 00:01:18.810
So if you list a fully opaque image or color

27
00:01:18.810 --> 00:01:20.930
with no transparency first,

28
00:01:20.930 --> 00:01:22.960
it will cover up all images behind it.

29
00:01:22.960 --> 00:01:25.740
So, let’s keep that in mind.

30
00:01:25.740 --> 00:01:27.210
Now that we have the images layered this way,

31
00:01:27.210 --> 00:01:30.480
we can easily control the composition of our background.

32
00:01:30.480 --> 00:01:34.430
For example, I can change the top value to bottom,

33
00:01:34.430 --> 00:01:39.780
and I can change the bottom value here to top.

34
00:01:39.780 --> 00:01:41.780
We'll refresh the page,

35
00:01:41.780 --> 00:01:45.290
and you can see how that affected our background image composition.

36
00:01:45.290 --> 00:01:48.480
This feature is widely supported by the major browsers.

37
00:01:48.480 --> 00:01:51.700
So go ahead and start using multiple background images in your next project

38
00:01:51.700 --> 00:01:53.490
or experiment with them on your own.

39
00:01:53.490 --> 00:01:56.370
As you can see, it’s an incredibly useful technique,

40
00:01:56.370 --> 00:01:59.880
as it provides a simple way for us to manipulate different image layers,

41
00:01:59.880 --> 00:02:04.170
and it prevents us from having to ness unnecessary elements in our markup.