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

Richard Targett
Richard Targett
4,960 Points
Posted by Richard Targett
Richard Targett
4,960 Points

Can I have a tiled background, as well as an image background? [HOW TO...]

Im trying to set up two different backgrounds.

In [body], Im displaying a pattern and want to have an image (with) the pattern.

Is it possible to setup two different backgrounds? One will be an image, the next a link to a pattern. I have the pattern working fine. Now what?

Do I use

body{ background-image: url (www.imagelocation.com); opacity: .5%; }

body { background-image: url (www.pattern.com); opacity: .5%;

Please let me know where in treehouse it tackles multiple items, and multiple images, and which selectors or attributes in css this is required in.

Any and all help is greatly appreciated. Thank you!

2 Answers

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Richard,

In css3 you can set multiple background images. You separate each layer with a comma and the first layer appears highest.

Here's the mdn page: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds

You'll probably want to do something like this:

background: url('image.jpg') no-repeat,
            url('pattern.png');

The image is set to not repeat and the pattern is set to the initial repeat value. You'll have to set any other background properties that you might need.

Richard Targett
Richard Targett
4,960 Points
Richard Targett
Richard Targett
4,960 Points

And factor in 50/50 opacity levels?

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I missed the opacity. Opacity applies to the element as a whole including it's content so you're not going to be able to apply it to the body.

What are you trying to achieve here?

A full page background? Does it scroll with the content or not?