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 Build a Simple Website Styling Content Writing CSS

Gemma shearer
Gemma shearer
3,121 Points
Posted by Gemma shearer
Gemma shearer
3,121 Points

What am I doing wrong?

I'm trying to format the 'Browse our cupcakes' but the changes I have made are not showing up.

Here is my css code:

.btn {
        color: #FAF3BC;
        background: #4FB69F url('C:\Users\Gemma_s\Documents\CSS\img\texture.png') no-repeat right top;
}

I just can't see the problem - my code is the same as the code shown in the video (isn't it?). I wondered if my html was the problem but that seems fine too.

Please can someone enlighten me?

5 Answers

Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

What isn't showing up? Are you working on this locally? If it's the image that's the problem, try using a relative url so, if your index is is Documents, use css/img/texture.png

Lauren Clark
Lauren Clark
33,155 Points
Lauren Clark
Lauren Clark
33,155 Points

Glad I could be of some help, and that you fixed it! Code is all about breaking and fixing. If you use Sublime Text as your text editor, you can install the package manager instructions to install it here and then install Sublime Linter and the corresponding lint packages (such as HTML, CSS to start)

A linter basically checks your code for missing closing tags, typos, wrong orders etc. A linter is essential! Especially if you're just starting out. I find if I know exactly what the mistake was, I can avoid doing it again in future :)

A post here about why you should use linters and how to install everything. Blog post on LInters

Tom Mertz
Tom Mertz
15,254 Points
Tom Mertz
Tom Mertz
15,254 Points

Hi Gemma,

You are using an absolute file path, like Lauren said. If you change the location of your files (like uploading them onto a server) then your css won't be able to find the texture anymore.

It looks like the texture image is in an img folder that is right in your CSS folder, so try using a relative file path (note the forward slashes):

.btn {
        color: #FAF3BC;
        background: #4FB69F url("img/texture.png") no-repeat right top;
}

See if that might help,

Tom

Gemma shearer
Gemma shearer
3,121 Points
Gemma shearer
Gemma shearer
3,121 Points

Thanks to you both, I've tried this but it doesn't work. As well as the texture not showing up the colour won't change either.

I've managed to sort it now though but I'm still not sure what I did wrong - but it was something to do with the html. I replaced my html with the html for the button element from codepen and it now works. I don't know why my code was wrong - I have compared the codepen code with mine side by side and it is identical! I think I will just look back at it when I am a little bit more experienced, this is all very new to me.

Thanks again.

Gemma shearer
Gemma shearer
3,121 Points
Gemma shearer
Gemma shearer
3,121 Points

Thanks for this Lauren, that sounds like exactly what I need!