Quick Tip: Multiple Background Images with CSS

quickTips_blogHeaders_CSS

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.

Follow us on Twitter:
http://twitter.com/treehouse

Find us on Facebook:
https://www.facebook.com/TeamTreehouse

Share this Video:
http://www.youtube.com/watch?v=c1IySadtkdo

Video Transcription

Guil: Hi, everyone. I’m Guil. In this Treehouse Quick Tip, we’ll learn how
to apply multiple background images to an element with just
one CSS declaration. Let’s get started.

With the multiple background CSS3 feature, we can build
multilayer backgrounds using the background CSS property.
If you’ve already applied a background image to an element
in the past, then you already know how to attach multiple
background images with CSS3. It’s just as easy as
separating each background value with a comma. So let’s
take a look at a simple example.

So far we only have this textured background image applied.
So in our CSS, let’s go ahead add two more background
images to our div. We’ll do this by separating each
background image value with a comma. So here we added two
more background image values to our background property,
and when we refresh the page, you can see how each value
generates a separate background image layered atop one
another.

It’s important to remember that the first image listed will
be the top image layer rendered closest to the viewer, and
the last image listed will be at the very bottom. The ones
in between, will be layered in subsequent order. So if you
list a fully opaque image or color, with no transparency
first, it will cover up all images behind it. So, let’s
keep that in mind.

Now that we have the images layered this way, we can easily
control the composition of our background. For example, I
can change the top value to bottom, and I can change the
bottom value here, to top. We’ll refresh the page and you
can see how that affected our background image composition.

This feature is widely supported by the major browsers. So
go ahead and start using multiple background images in your
next project or experiment with them on your own. As you
can see, it’s an incredibly useful technique, as it
provides a simple way for us to manipulate different image
layers, and it prevents us from having [inaudible 00:02:01]
unnecessary elements in our markup.

Announcer: If you’d like to see more advanced videos and tutorials like
this one, go to teamtreehouse.com and start learning for
free.

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from either HTML, CSS or Wordpress.

Start learning

Guil Hernandez

Guil is the front-end design teacher at Treehouse. You can follow Guil on Twitter at @guilh.

Comments

Comments are closed.