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 CSS Basics (2014) Basic Layout Backgrounds: Size and Position

Scott Raymond
Scott Raymond
6,542 Points
Posted by Scott Raymond
Scott Raymond
6,542 Points

Need 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.

Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Hi,

have you tried this path?

.main-header {
  text-align: center;
  background-color: #00FFFF;
  padding-top: 170px;
  height: 850px;
  background-image: url '../img/armshigh.jpg'; /* add "../" before */
}

2 Answers

Daniel Gauthier
Daniel Gauthier
15,000 Points
Daniel Gauthier
Daniel Gauthier
15,000 Points

Hey 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:

W3Schools

MDN

Good luck!

Scott Raymond
Scott Raymond
6,542 Points
Scott Raymond
Scott Raymond
6,542 Points

It 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
Gianmarco Mazzoran
22,076 Points
Gianmarco Mazzoran
Gianmarco Mazzoran
22,076 Points

Could you provide your code? via Workspace so I can see it.