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

Getting an error, please help. I was being asked to "Add the background texture.png from inside the img folder and set the background on repeat."

Below is the code I inserted, not sure how I would send a screen shot in this forum. Hopefully it won't be needed. Greatly appreciate the support.

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

26 Answers

jeff creamer
jeff creamer
23,733 Points

I found this question needlessly tricky (use texture.png instead of bg-texture.jpg) just for the sake of being clever. It simply frustrated rather than taught, especially if you don't have the image folder reference there, as Michael noted. You're following Nick along and he uses the file "bg-texture.jpg" for the bg texture that you're now about to replicate. He even says that the other file, texture.png, is for something else.

The incompleteness of the answer/correction, ie- "wrong file path" rather than "wrong file", just took up more time. You start to wonder if they meant .jpg not .png, or if they meant css/img/filename rather than img/filename. You and your client would know which file you were looking for in this case, so why the needless curveball and too vague correction? It just wasted the last 30 minutes I had available to spend here learning today so I found it just frustrating. Lol, rant over; back tomorrow.

I figured out. I was doing background-color: instead of just background:

Caroline Hagan
Caroline Hagan
12,612 Points

+1

Been there plenty of times, where I've spent literal hours trying to figure out why something wasn't working and been ready to throw the towel in, then ping you suss it out and you own that code!! lol

Worse still when you are working on the wrong stylesheet and you're not seeing the updates on the live site face palm hehe

James Barnett
James Barnett
39,199 Points

@Basim - The forum supports markdown, so just tab indent any code you paste into the forum.

3 other things to help you get your question answered sooner

  • Tag your posts with code challenge
  • Post a link to the code challenge you are having issues with and mention which step you are on
  • Create a "working" demo of your code using codepen.io
James Barnett
James Barnett
39,199 Points

You forgot the repeat attribute for the background.

Also url is not a valid CSS attribute, instead try breaking your background declaration into 2 rules, up the color and image.

Let us know if you have any more questions.

Caroline Hagan
Caroline Hagan
12,612 Points

In addition to James comments' the following is not a valid string of code...

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

You would need to end the color property with a semi-colon, like this:

color: #FAF3BC;

you've started the backgound property find... but you've ended it after you typed a semi-colon ( ; ) ... if you remove this, it should work?

Do let us know how you get on :-)

I have been having a problem with this challenge (the 4th task) for the last few days and its been bugging me.

I think the problem is that they don't give us the file name besides "background texture.png" which I'm pretty sure isn't 100% accurate.

{answer redacted}

I've tried background texture.png, background_texture.png, background-texture.png, bg-texture.png, bg_texture.png, and bg texture.png...

I've also tried both / and \ in the url location syntax. The completionist in me is dying a little.

James Barnett
James Barnett
39,199 Points

@Michael - You are so close. I think I know the issue you are having. What they are saying is, to add an image named texture.png located in a folder named img as a background, and set that background to repeat.

For reference, the instructions:

"Add the background texture.png from inside the img folder and set the background to repeat."

The name of the file is texture.png not background texture.png. So the correct path is img/texture.png

@ James - wow I feel kind of silly now... thank you so much for pointing out the completely obvious :)

I removed my solution.

Just as a solution to prevent this problem from happening in the future. Maybe tree house can add a "screen shot" of the file folder that these assets are in so its a little bit more realistic. They could even have a place holder for the entire "It smells like bakin' class" so the coder in training has to figure out which files/images to use.

Anyway - thanks again James!

James Barnett
James Barnett
39,199 Points

@michael - The picture of the file tree, is a pretty sweet idea, +1

The number of hours I've wasted on a misplaced semicolon. When it comes down to it, most time spent "coding" is actually spent debugging.

James Barnett
James Barnett
39,199 Points

@Jeff - I've spent many an hour chasing my own tail while troubleshooting. Liking coding is largely about enjoying spending the better part of a day hunting for a misplaced semicolon.

In regards to "wasting 30 minutes", I've learned a lot of valuable information from doing something wrong and learning how to fix it.

Parsing directions, spotting errors in the instructions as well as typos in your own code are all valuable real-world skills I use every day.

As is puzzling out how something is currently setup when you have no documentation telling you how things are supposed to work.

James Barnett
James Barnett
39,199 Points

@Caroline - I've totally done that :)

I use the NppFTP extension for Notepad++ which allows me to automatically upload files I save in my text editor.

Sometimes I forget to connect to my server and I wonder why my page isn't updating, a total face plam moment.

Michael Quirke
Michael Quirke
3,185 Points

Hey guys

I'm actually still having trouble with this question, despite it seemingly being answered here.

My code

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

Not sure why but it keeps saying 'Make sure you put the relative path to the image inside of 'url()'. ? It's probably some small bit of code that I've overlooked but I can't figure out what I might have left out.

James Barnett
James Barnett
39,199 Points

@Michael -

To format this another way:

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

Do you see any lines of code, that doesn't look like a valid CSS rule that you've already learned about?

Michael Quirke
Michael Quirke
3,185 Points

Hi James

Sorry I'm obviously a complete rookie at this, still not sure what I'm missing..would that be the correct format for this task that you posted, I did input this format exactly as is but it's still coming up incorrect? Otherwise the correct format would be much appreciated.

Thanks

Mike

@James you are a good man/teacher

@ Michael Q a hint - the ";" typically denotes the end of a command. Think of it like a period in writing.

So if I was going to give you.

an answer or command, why would I split it up? Also you're really close.

Michael Quirke
Michael Quirke
3,185 Points

@Michael T

Thanks for the hint I finally have it figured out lol. Also thanks to James for you help as well.

Cheers

I'm a total novice at this so apologies up front... I have read all of these posts and tried all the suggestions (that I could understand!) with no success.
If you follow the video and use variations of file name or path you keep getting the same error message - "Make sure you put the relative path to the image inside of 'url()'." If I start to apply my limited judgement regarding placement of code I get either the same message or worse still a message that says the previous tasks is now not working!!

Can anybody elaborate on what the issue is here - 1.file/path name? or

  1. coding that varies from that shown on the video? If it is coding where do I get information regarding the solution cos the same error message is not teaching me anything. Appreciate any help.....

Where I was going wrong, I believe, is that I was leaving a space between 'url' and the parentheses.

The mistake in James's code is that he has too many semi-colons - the one after the hexadecimal color and before 'url', and the one after the parentheses and before 'repeat'.

Hope this helps!

Craig

What the hell is wrong here? I can't pass this task. Can someone please be so kind to tell me what I am doing wrong? body { font-family: 'Nunito', 'sans-serif'; color: #FAF3BC; background-color: #420600 url('img/texture.png') repeat; }

HA! just did this task....Ronald solved everyones problems

Sean Burke
Sean Burke
1,619 Points

Hi guys, I am having trouble on the background color. I can't get the file bg-texture.png to load on the background. It is instead directing to #420600. I know this because when I delete #420600, the background goes to white. Here is my code.

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

Also, the file (that I downloaded from treehouse) is saved as (._bg-texture.jpg) - So I tried that and it still didn't work...

background: #420600; url('img/texture.png');

pay close attention to the semicolons it will make a hell of a difference.