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 dylan kane
dylan kane
2,094 Points

background properties help

in the background properties video, the teacher, "sorry i forget his name" put in an image and just kept going along and everything was normal for him. when i try to put in an image like he did it dose not work. i have tried a bunch of different ways and im thinking it's the directory that i have screwed up. what im trying to accomplish here is to just put and image in and center it but it wont come in, please help it would be greatly appreciated.

11 Answers

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

Before the image path. Like this:

background: url('../folder/bg-image');

Does that make sense?

dylan kane
dylan kane
2,094 Points

Yes thanks a lot man

dylan kane
dylan kane
2,094 Points

its not working for me heres my code

.background {
  background-image: url('../img/background-overlay.jpg');
  background-repeat: no-repeat;
  background-position: center;
}
Guil Hernandez
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi dylan kane,

Thanks for posting your code.

Your code is syntactically correct––nothing wrong there. So let's walk through everything that needs to happen in order for the image to appear correctly.

  1. The element needs to have the class="background" attribute
  2. In your project folder, the css file needs to be placed in a separate "css" folder
  3. The background-overlay.jpg image needs to be inside a folder named "img"
  4. The style sheet needs to be linked correctly: <link rel="stylesheet" href="css/style.css"> – or whatever the style sheet is named.

Hope this helps.

dylan kane
dylan kane
2,094 Points

thanks a lot guil! btw your videos are great

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

I'm guessing you've got an issue with file paths, this primer on absolute vs relative file paths should get you pointed in the right direction.

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

If your style sheet is in a folder then put ../ before that. What ../ is doing is going up one directory and then looking for the img folder and finally the image.

Hope that helps.

dylan kane
dylan kane
2,094 Points

Put ../ before what?

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

Try the background shorthand:

.background{
    background: url('../img/background-overlay.jpg') no-repeat center center;
}

Note: I put the extra center in there just in case.

dylan kane
dylan kane
2,094 Points
dylan kane
dylan kane
2,094 Points

still isnt working i dont know whats up

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

Can you give me a screenshot of your layout.

dylan kane
dylan kane
2,094 Points
dylan kane
dylan kane
2,094 Points

i emailed them to you

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

What the problem looks like is that you are using background-image instead you should use just background. Try this:

background: #313131 url('background-overlay.jpg') no-repeat center;

Hope that works.

dylan kane
dylan kane
2,094 Points

that didnt work either it just dosnt show up i have no idea what the problem is

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

In your style links try taking out media=screen. It's just a guess sometimes that's what makes the difference. Also put this in between your head tags:

<meta http-equiv="Content-Type" content="text/html, charset=utf-8">
dylan kane
dylan kane
2,094 Points
dylan kane
dylan kane
2,094 Points

still didnt work, im trying everything this is so stupid, its the simplest thing and it wont work!

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

Let me tag Guil Hernandez , maybe he can help.

dylan kane
dylan kane
2,094 Points

good idea

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

Try to take out:

type=text/css

In your link tags.

It's a long shot but still trying.