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
L McLean
Courses Plus Student 5,329 Pointscss external stylesheet and background image.
Hello! I finished the CSS deep dive and I am now attempting to build a new site within sublime text. I have successfully used the style tag for an internal stylesheet, but when I want to create an external stylesheet nothing works. I have used the following code:
<link rel= "stylesheet" href= "TPen.css" >
when I try to use more code as shown in the deep dive I lose my font in the browser.
Also, when it comes to putting in an image from the subtle background website I put in the following:
{background-image: url ( 'img/white_brick_wall_.png' ) repeat; }
Is there some horrible careless mistake that I am overlooking?
Thank you for all your help!
19 Answers
Paul Yabsley
46,713 PointsIn your code above there is a space after the url and before the opening parentheses. Is that how it is on your site too?
Try removing the space and see if that works.
Chase Lee
29,275 PointsIf you have your css in a folder the you need to go one directory up by adding: ../ to the beging of your url.
L McLean
Courses Plus Student 5,329 PointsAs I said in the previous post, The external style sheet does not work. As for making an internal style style sheet adding a ../ in my url has not worked either.
L McLean
Courses Plus Student 5,329 PointsNow the external stylesheet is working. I found somewhere on-line that css is case sensitive and there was two capitol letters. So, I put the images in the folder in my sublime text editor. And I have a "../ in my url, but it is not setting my background. hmmmmm.
James Barnett
39,199 PointsL McLean - CSS isn't case-sensitive, however your OSes file systems may be, a subtle but important distinction.
L McLean
Courses Plus Student 5,329 PointsThank you for that information. :)
Chase Lee
29,275 PointsCan you paste your code so we can see what you've got.
L McLean
Courses Plus Student 5,329 Pointsbody {background-image: url ('../img/white_brick_wall.png');}
James Barnett
39,199 PointsL McLean - Sounds like a file path issue. Check out this tutorial on file paths and an explanation of absolute vs relative paths. Issues with paths are one of the most common mistakes for those new to web design.
L McLean
Courses Plus Student 5,329 PointsThank you James! :)
L McLean
Courses Plus Student 5,329 PointsJames Barnett,
OK! I read the tutorial. Thank you again! I am understanding that I am building a relative path. Is my code wrong? Or is it because the file in the left hand corner of sublime is in the wrong place? Also, I fixed the space that Paul Yabsley below told me to and it didn't work. Here is the following code:
body {background-image: url("../img/white_brick_wall.png"); }
James Barnett
39,199 PointsL McLean -
I am understanding that I am building a relative path. Is my code wrong?
It depends on your directory structure and whether your CSS will work as you intended.
body {background-image: url("../img/white_brick_wall.png"); }
In plain English that means ...
- relative to the current file
- look up one level in the directory tree
- find a folder named
img - look for a file named
white_brick_wall.png.
+ website
|-- html
|---- index.html
|-- css
|---- sytles.css
|-- img
|---- bg.jpg
Given this directory structure, this is valid CSS body {background-image: url("../img/bg.jpg"); }
If you are still having issues take a screen shot of your directory structure and post it here so we can get a better idea of what you are trying to do.
L McLean
Courses Plus Student 5,329 PointsJames Barnett,
I appreciate all your help. I'm embarrassed to ask...how do I attach the screenshot to the post?
Thank you!
L
James Barnett
39,199 PointsHow you take a screenshot depends on your OS luckily take-a-screenshot.org has you covered with directions for most of them.
To post it on the forum:
- Go to imgur
- Click on
Computer - Select the image you saved when taking your screenshot
- Post link to the image here
L McLean
Courses Plus Student 5,329 PointsJames Barnett,
I knew about screenshots. Thank you for teaching me about imgur! Here is the link to the screenshot.
-L
Chase Lee
29,275 PointsYour HTML and your CSS need to be in a folder that is with your images also change img to Brick.
Chase Lee
29,275 PointsAfter that if your still having problems then take another screenshot.
L McLean
Courses Plus Student 5,329 PointsChase James, you solved the problem!!! Thank you soooooooo much! I appreciate it.
Chase Lee
29,275 PointsAny Time.
L McLean
Courses Plus Student 5,329 PointsChase James,
NIGHTMARE! I went back into the css to change the font color and when I refreshed, my background was gone!!! I erased the css that I did and refreshed again and nothing. SAD! ;( GRRRRR! What did I do?
Chase Lee
29,275 PointsIs this all the css or just the background-image?
L McLean
Courses Plus Student 5,329 PointsFirst of all, I must apologize. I should be getting this. Sublime is holding me back!!
I didn't see your above post above until just now. I went and looked back at the directory file as James Barnett said to do. I struggled to get the html folder above the css folder in sublime. It won't move.
Now none of my CSS works. I still have a sense of humor though!
Thank you for your help!
L
Chase Lee
29,275 PointsCan you do another screen shot.
L McLean
Courses Plus Student 5,329 PointsThank you! http://imgur.com/pRUUdiU
Chase Lee
29,275 PointsSo you need to go up one directory by adding ../ right before img. Also can I see your HTML.
L McLean
Courses Plus Student 5,329 PointsThank you!
Chase Lee
29,275 PointsNo, I need to see your style tag in your markup.
L McLean
Courses Plus Student 5,329 PointsPlease excuse my ignorance/careless mistake, but I am creating an external style sheet, not an internal one. Shouldn't the code: <link rel="stylesheet" type="text/css" href="tpensanti.css"> direct to my css page with the mark up? Should I be putting style tags in my html also? That's all I have.
Thank you for putting up with all my questions!
-L
Chase Lee
29,275 PointsWhat I need to see is something like this: <link rel="stylesheet" href="css/style.css">.
Chase Lee
29,275 PointsYou need something like that in between your head tags.
L McLean
Courses Plus Student 5,329 PointsYikes! I sent you the wrong url! SO SORRY! This is exactly what I have between the head tags in the HTML and below the title tags:
<link rel="stylesheet" type="text/css" href="tpensanti.css">
Chase Lee
29,275 PointsI know there is a post somewhere on how to display code I usually just wrap it in these: " `` ", but it dosen't always work.