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

Posted by scott duke
scott duke
5,033 Points

Backgrounds and Borders Code Challenge

I'm trying to drill down into the forum search in the CSS context, to find a solution to my problem. 1st, Im loving this! 2nd, I thought I'd try to be active in the forums. In the challenge, I am supposed to place an image into the "top-right" corner of a div with the class "sketch"(without the quotes). So I tried::

background: url('img/smiley.png') no-repeat top right; I tested this with a similar code at w3c which is:

/* I removed the color value, changed the image's file extension to ,png, and changed it to read as " top right" (again, no quotes) */

background: #00ff00 url('smiley.gif') no-repeat top right;

This seems to work at w3c, but not in the code challenge. I am 1st, guessing that I am typing something wrong. Any advice in helping me solve this, is appreciated :-)

scott duke
scott duke
5,033 Points

Resolved! Woo! I needed to use the shorthand version to move on in the challenge( I also had to fix my typos). I love Treehouse!

2 Answers

chrismartinson
chrismartinson
3,218 Points
chrismartinson
chrismartinson
3,218 Points

Glad you figured it out! In case someone else might come across this issue in the future, and as you've stated with the shorthand version, is to do something similar to this:

background: url('img/smiley.png') no-repeat top right;

to

background: background: url('img/smiley.png') no-repeat top right, url('img/othername.png') no-repeat bottom left;

So, instead of creating a new line, the information goes in-line with the previous background (before the other to appear on top).

Great work on figuring it out Scott!

scott duke
scott duke
5,033 Points
scott duke
scott duke
5,033 Points

Thanks! I will, for sure, type the code out so the steps can be easily readable for students. I love Treehouse!