Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Foundations Backgrounds and Borders Advanced Backgrounds

Matthew Beiswenger
Matthew Beiswenger
6,814 Points
Posted by Matthew Beiswenger
Matthew Beiswenger
6,814 Points

layering images

when layering images, does it only work in the shorthand "background:" property or can you also layer them with individual "background-image:" properties? If so, do the images simply layer in the order that the images are placed in the code?

1 Answer

Zhihao Wang
Zhihao Wang
9,687 Points
Zhihao Wang
Zhihao Wang
9,687 Points

Hi, I've dealt with this problem while creating my own website, css actually let's you layer background images, and it's not as complicated as it seems!

.home {
     background-image: url('imageone.png'), url('imagetwo.png');
}

By just separating the two urls by a comma, both of these images will be applied to the background image. Using this same notation, if you have 2 background images, you need to use the comma for any other background property such as:

.home {
     background-image: url('imageone.png'), url('imagetwo.png');
     background-position: 50% 50%, 15% 30%;
     background-attachment: scroll, fixed;
}

I don't know if you could set 2 background images for the background property, I recommend doing it this way. Also it makes the code more readable and clear when you come back and edit it later.

Happy Coding!

Matthew Beiswenger
Matthew Beiswenger
6,814 Points
Matthew Beiswenger
Matthew Beiswenger
6,814 Points

Thanks! This definitely answers my question. I wasn't sure if you could only layer images using the shorthand: 

background: url('imageone.png'), url('image two.png')

or if you could also layer them like you did in your example using:

background-image: url('imageone.png'), url('image two.png')

However, does the background positioning and background attachment in your example apply to both images then?

Zhihao Wang
Zhihao Wang
9,687 Points
Zhihao Wang
Zhihao Wang
9,687 Points

Yes,

The first background position / attachment declared is applied to the first image you list, then you add the comma, which tells the css that you're going to declare a styling for the second image. So it goes from left to right as you would expect.

If I was you, I would not layer images with the shorthand, this makes it very long and sometimes confusing, also it can lead to errors. I would declare everything in it's separate styling property, such as the background-image for the 2 images, and followed by a background-attachment property and then by any other styling you wish to do. In my opinion, this not only leads to readability, but it also makes it easier to fix if you do screw up.

So to reiterate, the styles apply from left to right, so the first styling you list will be applied to the first image you added, then followed by a comma, then proceeding with the second style for the second image.

I'm not the best at explaining, but I hoped I made it clear enough

cheers!