Multiple Backgrounds: Part 1

7:47

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

  • 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