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 Rafael Mocelin
Rafael Mocelin
Courses Plus Student 3,271 Points

Cannot get background texture to work

I am doing the Smells like Bakin CSS challenge where we have to get a background texture. The image is in my desktop in a folder called img, just like the video, except the texture does not show up.

Here is a copy of my style.css file so far:

body {
    font-family: 'Nunito' sans-serif;
    color: #FAF3BC;
    background: #420600 url('img/bg-texture.jpg') repeat;
 }

 a {
 color: #4FB69F;
 text-decoration: none;

Anyone know what is wrong?

Thanks in advanced

Thomas Wainwright
Thomas Wainwright
2,672 Points

It's probably because you haven't added a comma to seperate the two font styles which is invalidating the CSS.

try:

font-family: 'Nunito', sans-serif;
Rafael Mocelin
Rafael Mocelin
Courses Plus Student 3,271 Points

I have a comma, don't know why it didn't show up here. Im having trouble with the background texture though... Been trying to solve it, can't seem to get it to work.

Chase Lee
Chase Lee
29,275 Points

That's true. Try this:

font-family: Nunito, sans-serif;

6 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points

I'm glad you figured it out, Rafael Mocelin.

The reason this is so is because CSS uses the directory the stylesheet (or style tag if it is inline) is in as a base-URL (e.g. project-path/css/style.css). So this means that background: url('img/bg-tgexture.jpg'); is looking for an img directory within the base-URL.

Furthermore, you can use a relative URL instead of using c:/Users/Rafael/Desktop/img/bg-texture.jpg, you could write that as ../img/bg-texture.jpg. The ../ is referencing the parent directory of the current one.

I hope this helps you understand better what was happening here.

Rafael Mocelin
Rafael Mocelin
Courses Plus Student 3,271 Points

Thank you for the explanation, that should save some time from now on.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Rafael Mocelin - Here's a great primer on file paths that should help you understand absolute vs relative paths

mc227
PLUS
mc227
Courses Plus Student 6,520 Points
mc227
mc227
Courses Plus Student 6,520 Points

I would recommend you to have your project files in just one folder or location, this way your HTML file is more easy to navigate with and find your other resources. have all of them in one folder.

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

Try taking out the quotes from 'Nunito' and make it look like this Nunito.

Hope that helps.

Rafael Mocelin
Rafael Mocelin
Courses Plus Student 3,271 Points

Thanks for the reply. I tried taking the quotes out but no luck. The problem I'm having is in the background textures, the fonts are working.

Chase Lee
Chase Lee
29,275 Points
Chase Lee
Chase Lee
29,275 Points

What is the name of your background image? Also is it in a folder called img?

Rafael Mocelin
PLUS
Rafael Mocelin
Courses Plus Student 3,271 Points
Rafael Mocelin
Rafael Mocelin
Courses Plus Student 3,271 Points

Wow I feel dumb, I hadn't tried the exact location of the file. Instead of url('img/bg-texture.jpg') I had to write url('c:/Users/Rafael/Desktop/img/bg-texture.jpg').

Thanks for the help guys.