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 Compass Basics Compass Helper Functions Compass Helper Functions

Posted by Timothy Hooker
Timothy Hooker
15,323 Points

I am having a hard time with this task of putting an inline image as the background in Compass.

how would you declare the image and background for this file ''mixin-monster.png''

Timothy Hooker
Timothy Hooker
15,323 Points

This is what I've been doing:

.featured-icon {
  background: inline-image('img/mixin-monster.png');
}

3 Answers

Kate Hoferkamp
Kate Hoferkamp
5,205 Points
Kate Hoferkamp
Kate Hoferkamp
5,205 Points

Try this: 

@import "compass";

.featured-icon {
  background: image-url('mixin-monster.png') inline;
}

You have to import compass to be able to use it.

Elizabeth BABYCH
Elizabeth BABYCH
6,993 Points
Elizabeth BABYCH
Elizabeth BABYCH
6,993 Points

Thanks Timothy! I thought I tried everything...

Timothy Hooker
Timothy Hooker
15,323 Points
Timothy Hooker
Timothy Hooker
15,323 Points 
.featured-icon {
  background: image-url( inline-image('mixin-monster.png') );
}

OK I kept poking around and figured it out.

Timothy Hooker
Timothy Hooker
15,323 Points
Timothy Hooker
Timothy Hooker
15,323 Points

Thanks Kate , I had the @import in there but that was a good point.