Multiple Backgrounds: Part 1

7:47

In this video, you'll learn how to layer multiple backgrounds on top of one another using CSS3.


Video Transcript

  • 0:00

    [?mellow guitar music?]

  • 0:03

    [Think Vitamin Membership - Est. 2010] [membership.thinkvitamin.com]

  • 0:07

    [CSS3 Backgrounds - Multiple Backgrounds: Part 1 with Nick Pettit]

  • 0:13

    CSS3 features a robust backgrounds and borders module

  • 0:17

    that allows you to fine-tune the look of your pages.

  • 0:20

    In this video, we're going to learn how to layer multiple backgrounds

  • 0:23

    on top of one another.

  • 0:25

    The new background features of CSS3 are really interesting,

  • 0:29

    but sometimes it can be hard to think of a real-world situation

  • 0:33

    where you'd actually apply them.

  • 0:36

    So rather than learn these new concepts in a vacuum,

  • 0:39

    we're going to work on a mini-project over several videos

  • 0:43

    that will end up looking similar to this.

  • 0:47

    It will continue to evolve from here, but you get the idea.

  • 0:50

    Many web applications and mobile apps have promotional websites like this

  • 0:55

    where they have a big screenshot of the product,

  • 0:58

    some exciting custom-designed background that breaks outside of the grid,

  • 1:04

    and some copy that tells you about the product.

  • 1:07

    Apple does this, 37signals does this, and now we're going to do this.

  • 1:11

    If you've ever used an image editing program like Photoshop,

  • 1:15

    multiple backgrounds should come naturally to you.

  • 1:19

    Basically, you're working with multiple images, colors, or gradients,

  • 1:24

    and you're layering them on top of one another.

  • 1:27

    Here, we have 3 distinct layers.

  • 1:30

    There's a gradient at the very back,

  • 1:33

    there's this swirling paint in the middle ground,

  • 1:37

    and there's a screenshot at the front.

  • 1:40

    The background is being generated using CSS3 gradients,

  • 1:45

    but you could just as easily use a color or another image.

  • 1:49

    More on that later.

  • 1:51

    The other 2 layers are transparent png images

  • 1:54

    that I've created using Photoshop.

  • 1:57

    Now, let's quickly take a look at the source images.

  • 2:01

    This is what the paint looks like.

  • 2:04

    Like I said, it's a transparent png image,

  • 2:07

    and it has a really nice, intricate alpha channel

  • 2:10

    that allows us to layer it on top of anything,

  • 2:15

    and here is the screenshot with perspective and a reflection.

  • 2:21

    I would like to point out here that you could take a flat image of the screenshot

  • 2:27

    and apply a CSS3 Transform and Reflection with Image Mask

  • 2:32

    and get the same effect,

  • 2:34

    but that would add a lot of complexity to this exercise

  • 2:39

    so we're just going to use an image for the sake of simplicity.

  • 2:43

    I'm sure a crazy, enterprising individual

  • 2:46

    could make this swirling paint using pure CSS3

  • 2:50

    or a Canvas element, but it's much smarter to use an image for this as well.

  • 2:55

    Both of these images are included with the downloadable code

  • 2:59

    so if you're following along, you'll want to go ahead and download those now.

  • 3:04

    So let's look at this project.

  • 3:07

    I'm going to switch over to TextMate and here's what our HTML looks like.

  • 3:12

    It's fairly simple with just a wrapper div,

  • 3:16

    a headline tag, and a few paragraphs.

  • 3:19

    This markup plus some CSS is all we'll need to make the final product.

  • 3:24

    Now, let's look at the styling.

  • 3:27

    There's just some boilerplate code here, so let's go ahead and start building the foundation

  • 3:32

    for our layered background.

  • 3:35

    I'm going to go into the wrapper here and first,

  • 3:39

    I'm going to add in some margin on the top and bottom--

  • 3:43

    just to separate things out a little bit--

  • 3:45

    and auto; to center it on the left and right.

  • 3:48

    I'm going to give it an explicit height of 480px.

  • 3:53

    I'm going to also give it some padding of 10px all the way around.

  • 4:00

    I'm going to give it a webkit-border-radius of 4px on all 4 sides.

  • 4:07

    You could, of course, use another vendor prefix

  • 4:10

    to make it work in Firefox or Opera or another browser,

  • 4:14

    and then I'm also going to use

  • 4:16

    a webkit-box-shadow:--same thing--

  • 4:19

    you can use other vendor prefixes if you would like.

  • 4:23

    And I'm going to center our box shadow and give it about 10px of blur radius

  • 4:31

    and I'm going to set it to black with a transparency of 50 percent.

  • 4:37

    Now, let's go ahead and switch back to the browser,

  • 4:40

    and let's take a look at what we're starting out with.

  • 4:43

    Again, we just have our headline tag

  • 4:46

    and some paragraph text and that's it.

  • 4:50

    But now, when we refresh, we can see that our wrapper is starting to center the content,

  • 4:57

    and it will kind of separate everything from the background really nicely.

  • 5:02

    Now, let's go ahead and add in 2 of our 3 backgrounds.

  • 5:08

    I'm going to first type them out,

  • 5:11

    we'll see what it looks like in the browser, and then I'll explain it.

  • 5:14

    So let's switch back to TextMate

  • 5:17

    and I'm going to add in the background property here

  • 5:21

    and I'll make some room for us to work here first.

  • 5:24

    So we'll first type out background: url()

  • 5:28

    and I'm going to use an image.

  • 5:31

    So I'm going to go up out of this CSS directory

  • 5:34

    and I'm going to go back down into the images directory

  • 5:37

    and I'll type out /images/screenshot.png and that will be our first background

  • 5:44

    and i'll just position it a little bit here,

  • 5:47

    and I don't want this background to repeat--

  • 5:50

    I just want to show it once.

  • 5:52

    I'll put in a comma and skip down to the next line,

  • 5:56

    and then same thing for our second image.

  • 5:59

    I'm going to jump out of the CSS directory, go into the images directory,

  • 6:04

    and we want to use paint.png for our image.

  • 6:08

    I'm going to just put it at the top left,

  • 6:12

    and I don't want it to repeat, either.

  • 6:15

    So now, we'll switch back to the browser and refresh,

  • 6:19

    and obviously there's some work to do, but you can see things are starting to come together

  • 6:23

    really nicely.

  • 6:24

    We have our paint image,

  • 6:27

    and then the screenshot image being layered on top.

  • 6:30

    Now, let's go ahead and take a look at the code again.

  • 6:33

    There are 2 ways we can layer multiple backgrounds on top of one another.

  • 6:38

    We'll stick with the simpler, more consolidated method for now,

  • 6:41

    but in an upcoming video, I'll explain the other way of doing it.

  • 6:45

    Basically, you use the background property

  • 6:49

    just as you normally would.

  • 6:51

    You type out all of the values for your first background.

  • 6:55

    Then you add a comma at the end of the line

  • 6:59

    and you type out the values for your next background.

  • 7:03

    Remember, values for each individual background are separated by spaces,

  • 7:09

    and then, the backgrounds themselves are separated by a comma.

  • 7:15

    Only after the last background do you actually put your semicolon to end the line.

  • 7:21

    Usually, I like to put a line break in between each background

  • 7:27

    as I've done here.

  • 7:28

    You don't have to format things this way,

  • 7:30

    but it's a good way of keeping your backgrounds organized.

  • 7:34

    We've added our first 2 backgrounds.

  • 7:37

    In the next video, we'll add a third background and finish things up.

  • 7:41

    [?mellow guitar music?]

  • 7:43

    [Think Vitamin Membership - Est. 2010] [mt

Show full transcript

Workspace

You have to sign up for Treehouse in order to create workspaces.

Sign up

Downloads

You have to sign up for Treehouse in order to download course videos.

Sign up

Instructor

  • Nick Pettit

    Nick is a designer, public speaker, teacher at Treehouse, and co-host of The Treehouse Show. His Twitter handle is @nickrp.