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

HTML

Posted by Elliott Ramsey
Elliott Ramsey
1,491 Points

Building a Website

Hi, I'm working on my style sheet for a website I'm building (aside from the cupcake website) and am trying to add my own back ground images (in the style sheet) to the webpage (for the main background and the button). It cannot seem to find the images though. I go to the internet, save the image into my 'img' folder, and then i type my code in like this:

.btn{ color:#FAF3BC background: #4FB69F url('img/another-jedi-set-to-return-for-star-wars-episode-vii-header-texture.jpg') no-repeat right top; }

My link to the style sheet is: <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">

Please help!!

Scott Evans
Scott Evans
4,236 Points
Scott Evans
Scott Evans
4,236 Points

I take it this is a local project on your computer?

6 Answers

Elliott Ramsey
Elliott Ramsey
1,491 Points
Elliott Ramsey
Elliott Ramsey
1,491 Points

Yessir!

Hugo Ballesteros
Hugo Ballesteros
15,945 Points
Hugo Ballesteros
Hugo Ballesteros
15,945 Points

If you put this code exactly:

.btn{ color:#FAF3BC background: #4FB69F url('img/another-jedi-set-to-return-for-star-wars-episode-vii-header-texture.jpg') no-repeat right top; }

You missing a semicolon after the color attribute. This would be the right way:

.btn{ color:#FAF3BC; background: #4FB69F url('img/another-jedi-set-to-return-for-star-wars-episode-vii-header-texture.jpg') no-repeat right top; }
Elliott Ramsey
Elliott Ramsey
1,491 Points
Elliott Ramsey
Elliott Ramsey
1,491 Points

Oh i did put that semicolon. I'm not sure why it didn't show up? I can't figure this problem out and its so annoying!

Scott Evans
Scott Evans
4,236 Points
Scott Evans
Scott Evans
4,236 Points

Try 

.btn{ 
color:#FAF3BC; 
background: url('img/another-jedi-set-to-return-for-star-wars-episode-vii-header-texture.jpg') no-repeat right top #4FB69F;
}
Elliott Ramsey
Elliott Ramsey
1,491 Points
Elliott Ramsey
Elliott Ramsey
1,491 Points

hmm that pretty much just flips the color. it must be something i'm doing somewhere else. does it matter that i saved the images from google images?

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

where is your css file in relation to your img folder? If you css file is in a folder like root/css/style.css and your img folder is on your root like root/img/mypicture.jpg then your url would need to start with '../' so your background would be background: url('../img/another-jedi-set-to-return-for-star-wars-episode-vii-header-texture.jpg') no-repeat right top #4FB69F;

also make sure you clear your cache. Are using Firebug or anything to see if the image is found? I like using Firebug because it will show the image in firebug or tell me the image was not found. Sometimes it sees the image, but still doesn't display which shows me that the problem is elsewhere.