Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

can'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
Sean T. Unwin
28,660 Points

url() 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.

i 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?

Good 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
Sean T. Unwin
28,660 Points

I 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
Sean T. Unwin
28,660 Points

Can you post the CSS block where you are using url()?

Don't leave out semicolons, lol. Thanks for helpin' Sean!

ok 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;

}

It 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
Sean T. Unwin
28,660 Points

The 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;
}

well 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
James Barnett
39,199 Points

i 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