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
Nelson Fortes
3,145 PointsSublime Text editor
hey guys so im using sublime instead of work space everything is fine but how would the imgs work, I made a desktop file with a bunch of imgs but its still not linking to the html. Which kind of brings me to another question if I am using a background image do I still have to href it in the mark up ? thanks guys
6 Answers
Kez Khou
3,903 PointsHello Nelson Fortes , please paste a copy of your html and css code, and we'll be able to easily understand and more accurately answer your question.
But a general answer to using a background image via CSS, you would only have the link reference within your CSS. You would not need an img href in your HTML mark up as well.
If you find it hard to remember a rule of thumb is HTML = information content whereas CSS = Presentation. Hope that helps!
Keri Nicole
15,134 PointsThe image location in your <img> tag is in relation to where the HTML file is located. If you're storing your images in a folder called "images" on your desktop, then you would probably want to have your HTML file located on the desktop to make things easier. I'd recommend not working on the desktop though, as things can get a little messy when you start to have multiple projects. You are, of course, welcome to continue working on the desktop if that's something you prefer.
As an example, if you have an index.html file located on the desktop and a folder named "images" there as well, then you would want your <img> tag to look like this:
<img src="images/picture.gif" alt="Picture Description">
Think of the src as the HTML file saying, "Hey, I want to display an image. Look for the 'images' folder in the place that I am now for a file called picture.gif and show that."
As long as your index.html file (or whatever HTML file you're using) is located in the same place as your images folder, it will always look like this. If you were to start nesting folders, creating multiple image folders, or making several HTML files and keeping them in different places, then the file path would change. For now, just stick to keeping your HTML files in the same folder as your "images" folder.
Kez Khou
3,903 PointsNo problem Keri Nicole ! Always happy to help ;-)
Nelson Fortes
3,145 PointsThanks everyone I will try it, I do have another question if I could ... right now im building like a profile landing site and was approaching it with starting with a background images colors etc. Then adding markup things later on... my question is it wise to do that like get all my images where I want them then add captions links etc afterwards
Keri Nicole
15,134 PointsYou can totally do that! I'm a big fan of just trying things out and figuring out my own style. You might run into problems doing it that way and then later determine that it might have been easier another way.
Whenever I've started on a site layout and design, I have some kind of end goal in mind. While working through the process of setting things up and putting images and whatnot where I want them, I almost always change my mind several times and do things a little bit differently than I'd originally intended.
Just play around and find what works for you. The best way to learn is through trial and error. :)
Kez Khou
3,903 PointsNelson Fortes , at the end of the day its going to depend on your personal preference, as well as what your over all goal is for the project itself.
My current workflow and focus is building mobile friendly web apps/sites first, then focusing on the desktop rendering of the web app/site. With that in mind, my workflow has me focused on the semantics and structure first rather than the actual content, meaning im really more focused on the actual structure of the mobile view first, then the desktop view, and then I worry about what images/content will be placed within the pre built structure.
I do this with the mindset that the sites content will be forever changing, I find that if and when I do focus primarily on the content/images that are on a site, the site will tend to become "stale" faster because thats where the energy was focused when the site was built, so personally I stay away from gathering images and laying them out and saying yes im going to build around this image here, and this image there, etc.
Again, hope that helps!
Nelson Fortes
3,145 PointsThank you very much everyone I appreciate the support and input
Keri Nicole
15,134 PointsKeri Nicole
15,134 PointsOh yes, I skipped the background image part in my answer. The background image referenced in the CSS doesn't go in the HTML file as well. Thanks for addressing that, Kez. :)