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

Dan Farrell
Dan Farrell
4,124 Points
Posted by 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
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
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