Multiple Background Images with CSS2:04 with Guil Hernandez
In this Quick Tip we'll learn how to apply multiple background images to an element with just one CSS declaration. This CSS3 tool allows you to layer several background images on top of each other to create the perfect look. And, it's as easy as specifying different images in the background-image element you are probably already using.
[treehouse presents] 0:00 [Multiple Background Images In CSS with Guil Hernandez] 0:02 Hi, everyone, I’m Guil. 0:05 In this Treehouse quick tip, we’ll learn how to apply multiple 0:07 background images to an element with just one CSS declaration. 0:09 Let’s get started. 0:13 With the multiple background CSS3 feature, 0:15 we can build multilayer backgrounds using the background CSS property. 0:18 If you’ve already applied a background image to an element in the past, 0:22 then you already know how to attach multiple background images with CSS3. 0:25 It’s just as easy as separating each background value with a comma. 0:30 So let’s take a look at a simple example. 0:33 So far we only have this textured background image applied. 0:36 So in our CSS, let’s go ahead add 0:40 two more background images to our div. 0:42 We’ll do this by separating each background image value with a comma. 0:45 So here we added two more background image values 0:50 to our background property. 0:52 And when we refresh the page, 0:54 you can see how each value generates a 0:56 separate background image layered atop one another. 0:58 It’s important to remember that the first image listed 1:01 will be the top image layer rendered closest to the viewer, 1:04 and the last image listed will be at the very bottom. 1:08 The ones in between will be layered in subsequent order. 1:12 So if you list a fully opaque image or color 1:15 with no transparency first, 1:18 it will cover up all images behind it. 1:20 So, let’s keep that in mind. 1:22 Now that we have the images layered this way, 1:25 we can easily control the composition of our background. 1:27 For example, I can change the top value to bottom, 1:30 and I can change the bottom value here to top. 1:34 We'll refresh the page, 1:39 and you can see how that affected our background image composition. 1:41 This feature is widely supported by the major browsers. 1:45 So go ahead and start using multiple background images in your next project 1:48 or experiment with them on your own. 1:51 As you can see, it’s an incredibly useful technique, 1:53 as it provides a simple way for us to manipulate different image layers, 1:56 and it prevents us from having to ness unnecessary elements in our markup. 1:59
You need to sign up for Treehouse in order to download course files.Sign up