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

Dan Farrell
Dan Farrell
4,124 Points

Instead of displaying the background image with url(), use the Compass URL helper that generates a path to image assets

Struggle to find the correct answer for this test question on the 'Compass Basics' course. I've looked back through the videos but I can't find the correct answer.

Can anybody help me find out the answer?

sass/style.scss
/* Write your SCSS code below. */

.featured-icon {
  background: url('img/mixin-monster.png');
}
index.html
<!DOCTYPE html>
<html>
<head>
  <title>My Compass Project</title>
  <link href="stylesheets/page.css" rel="stylesheet">
  <link href="stylesheets/style.css" rel="stylesheet">
</head>
<body>
  <div class="featured-icon"></div>
  <h2>The Golden Rule of Mixins</h2>
  <p>Most Sass-based sites define sets of reusable mixins that design teams can use over and over again. But with great power comes great responsibility. Some designers or developers start by creating hundreds of mixin helpers in their projects, which can make the code really bloated and confusing.</p>
  <p>The golden rule with Sass mixins is: If you find yourself coding in a similar pattern 2 or 3 times, it's probably a good candidate for a mixin. But if you use a mixin six or more times, it's a good candidate for a global mixin.</p>
</body>
</html>

1 Answer

Tobias Helmrich
Tobias Helmrich
31,602 Points

Hey Dan,

the Compass URL helper that creates a path to image assets is called image-url . Also note that you have to remove the current path (img/) to the image because the path is already created by the URL helper.

/* Write your SCSS code below. */

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

I hope that helps! :)

Dan Farrell
Dan Farrell
4,124 Points

Thank you Tobias!

I was trying that but I must of been forgetting to remove the "img/" part of the path