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 trialScott Raymond
6,542 PointsNeed help with path for background image
Here's my set-up:
File folder on my desktop called "website." Inside that folder i have index2.html which is the main site I am trying to play with to apply these treehouse lessons. In the "website" folder I have a "CSS" folder. In the "website" folder I also have a img folder with the images I want to use for possible background image.
I always struggle with getting the correct path to things once I am outside of the treehouse playground. (I am using Notepad++).
Inside my style sheet I have this
.main-header { text-align: center; background-color: #00FFFF; padding-top: 170px; height: 850px; background-image: url 'img/armshigh.jpg';
}
I have tried many things and just don't know how to get the right path. Image is called "armshigh" it is a JPG file inside my "img" folder which is in my "website" folder on my desktop. Feels like I have tried everything and can't get the right path.
Also do I need this image in my html??? Or since it is a background image do I only need it in my CSS.
Always get stuck once I am outside of the playground and trying to figure out right paths to my files. I appreciate any help. Thanks.
2 Answers
Daniel Gauthier
15,000 PointsHey Scott,
First off, you don't need to include an image in your HTML if you plan to use it in your CSS. You can use images in CSS without them ever being referenced in your HTML without any issues.
I checked out your code and noticed you weren't declaring the path properly.
Check out the code below and note the brackets around the path following the url:
.main-header {
text-align: center;
background-color: #00FFFF;
height: 850px;
padding-top: 170px;
background-image: url('../img/armshigh.jpg');
}
Without the brackets the path won't work. I threw a small project together on my desktop using all of the information and the fix and it works, although you'll likely want to use a background-position after this step.
Here are a few links describing how background-position works:
Good luck!
Scott Raymond
6,542 PointsIt worked!!! Thank you so much! I have been getting stuck on not having the right paths. Thanks for taking the time to help me!!!
Gianmarco Mazzoran
22,076 PointsDidn't notice the parenthesis!
Scott Raymond
6,542 PointsYes. Still no luck.
Gianmarco Mazzoran
22,076 PointsCould you provide your code? via Workspace so I can see it.
Gianmarco Mazzoran
22,076 PointsGianmarco Mazzoran
22,076 PointsHi,
have you tried this path?