Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

And factor in 50/50 opacity levels?

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?