Multiple Background Images with CSS

[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 set up Workspace

Sign up