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
James Montgomery
Courses Plus Student 699 Pointscan't set background with the url() command
Hi all,
I'm stuck for the first time. I'm doing this on win 7 64 bit, not mac, so watching the videos, they layout is slightly different for Sublime Text 2 and one thing i've noticed so far doesn't work and i found a workaround for loading images with img src command. I don't seem to be able to just use the img/(whatever image) when loading a pic. i have to find it in my pc and copy/paste that directory into the " " like this line of code for instance.
<img src="C:\Users\GeneticSSD\Downloads\websitewaters-island01-stage01\img\logo.gif" alt="Smells Like Bakin">
If i use the line of code he uses in the video for the logo, it disappears and i get a small box with a picture of what looks like a piece of paper with a folded top right corner and the bottom right corner is severed.
My problem now is setting the background to the bg-texture.jpg with that url() command. when i used the file location like i do with img src, it does not work. i still have a white background. ive tried a few different ways of coding it and it is always white, i cant get the reddish brown background to load no matter what i try. if anyone can tell me what i'm doing wrong i would be most thankful! Appreciate any comments!
7 Answers
Sean T. Unwin
28,690 Pointsurl() uses the directory where the .css file is stored as the root directory. If you use the relative path to an image you must account for the directory where the .css file is kept in relation to the directory where the image is kept.
If you have a structure like the following:
|-- /images/
|-- bg-texture.jpg
|-- /css/
|-- style.css
|-- index.html
Then when using url() the relative path would be "../images/bg-texture.jpg". The use of "../" means to go up one level in the directory hierarchy.
It is recommended to keep your files within a project directory then add directories (folders) inside that parent directory as needed. This assists with organization as well as aiding in keeping relative paths easier to use and be more coherent.
James Montgomery
Courses Plus Student 699 Pointsi still cant get it to work, and i dont understand why when i tell an img src to find it, it finds it no problem using the whole pathing. when i do it with url command it does not find it. what is the difference between img src and url commands?
James Montgomery
Courses Plus Student 699 PointsGood dear god I figured it out with the help of my buddy. I had just left out a semicolon at an extremely important point. Ugghhhhh....
Sean T. Unwin
28,690 PointsI had a feeling you had a typo. That's why I asked you to post the code. Glad you figured it out. :-)
Sean T. Unwin
28,690 PointsCan you post the CSS block where you are using url()?
James Montgomery
Courses Plus Student 699 PointsDon't leave out semicolons, lol. Thanks for helpin' Sean!
James Montgomery
Courses Plus Student 699 Pointsok turns out i didnt fix it. the texture is very subtle so i thought at first i fixed it. i believe it is just making my background red colored because of the hexidecimal color, but it is not applying the texture because i removed the url() and it looks the same as when i leave the url() in, still red with no texture. here is my code if anyone can figure out why it isnt working.
body{ font-family: 'Nunito', sans-serif; color: #FAF3BC; background: #420600 url('C:\Users\GeneticSSD\Downloads\websitewaters-island01-stage01\css\img\bg-texture.jpg') repeat;
}
Carman A
7,672 PointsIt might help with your problem if you create a folder for images inside the folder, for your code and move the image inside that folder. So if your you named your folder img it would look like url('img/bg-texture'). And remove your hexadecimal color because it will make it easier to see when the image comes up.
Sean T. Unwin
28,690 PointsThe background color has to be last, all images first. Comma-separate the listings for multiple backgrounds as well. So reverse the order that you have now and add a comma in between.
body {
...
background: url('C:\Users\GeneticSSD\Downloads\websitewaters-island01-stage01\css\img\bg-texture.jpg') repeat, #420600;
}
James Montgomery
Courses Plus Student 699 Pointswell i got it to work, with background: #420600 url("img/bp-texture.jpg") repeat; just like he has it in the video. it doesnt work if i use the entire directory pathing oddly. i guess img src can fetch data with the entire C:\ etc but the url() command is not able to do that.
James Barnett
39,199 Pointsi guess img src can fetch data with the entire C:\ etc but the url() command is not able to do that.
That's incorrect, they both work the same way. You probably want to read up on the differences between absolute vs relative paths