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
Juliet DeAmicis
2,042 PointsBackground Image not showing up
I can't figure out why my background image is not showing up. I tried two different relative links cause i wasn't sure which one it was (this is all formatted with the brackets and such on the actual page)
background: url ('img/purple-dot.jpg') repeat;
and
background: url ('../img/purple-dot.jpg') repeat;
and cause i wasn't sure,
background: url ('/img/purple-dot.jpg') repeat;
the folder Is in my img folder and the img folder is in the same folder as my css, and index.html page.
the background color functions when I put it before the url, just not the Image!*
Here is my code:
CSS
body {
font-family: 'Averia Libre', cursive;
color:#354B5E;
background: #420600 url ('/img/purple-dot.jpg') repeat;
HTML
```<!DOCTYPE html> <html>
<head> <title>Website Practice One</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Averia+Libre:400,700,300italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"> </head>
<body> <div class="container clearfix">
<nav class="grid_12">
<ul class="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>```
ectera....
19 Answers
Tom Bedford
15,645 PointsI think the first one you listed is correct, however it looks like there is a space between "url" and the first bracket?
If your style.css and index.html are in the same folder with the image in a different folder:
body {
background: #420600 url("img/purple-dot.jpg") repeat;
/* this looks in the same directory as you are currently in for a folder called "img" and then the image file */
}
If your index.html is in a folder with separate folders for the css and images:
body {
background: #420600 url("../img/purple-dot.jpg") repeat;
/* this jumps up one folder, i.e. out for your "css" folder" and then goes into the "img" folder to find the image */
}
If your index.html, style.css and image are all in the same folder:
body {
background: #420600 url("purple-dot.jpg") repeat;
/* this looks for a file in the same folder as your .css file is in */
}
Adam Lake
3,810 Pointsassuming body has been defined in the html aswell
Adam Lake
3,810 Pointsnot sure if its the problem but im pretty sure you don't need the first / in the url
Adam Lake
3,810 PointsAlso look into you opening and closing tags, maybe you didn't paste the full code in but i can see something missing a closing tag :)
Juliet DeAmicis
2,042 Pointsill check out both. adam can you hint to me whereabouts you saw the open tag? I can't seem to find it.
Adam Lake
3,810 Pointswithin the CSS code you linked :)
Juliet DeAmicis
2,042 PointsI also don't think I quite understand the relative tags. I have all my folders css folder, img folder, index.html in a folder.... if i want to get to an image from that folder the relative tag is 'img/picture.jpg' or '/img/picture.jpg' OR '..img/picture.jpg'
Adam Lake
3,810 PointsIt all depends on where you image in comparison to you html / css docs.
so if you have a folder with Index.html, style.css and a folder called 'img' then the link would be 'img/picture.jpg'.
if you had a folder with index.html, img folder and css folder that has your style sheet in then you will have to use the .. at the start to get back to the root folder.
Tom Bedford
15,645 PointsI've updated my answer to cover the different possibilities of where your image could be and explanations for where each code is looking.
Guil Hernandez
Treehouse TeacherHey Juliet DeAmicis,
Take a look at Nick's article on this topic. It's really helpful. :)
Juliet DeAmicis
2,042 PointsOkay I fixed the brackets and I tried background: url('img/purple-dot.jpg) repeat; but its still not working! here's all my code, am I being an idiot somewhere?
CSS body { font-family: 'Averia Libre', cursive; color:#354B5E; background: #420600 url('/img/purple-dot.jpg') repeat; }
a{ color:#D74B4B; text-decoration: none; font-size: 2em; background: #DCDDD8 right top; padding: 15px 30px; /* padding on top bottom and right left (when its four values its top right bottom left) padding is when theres text and the square around the text expands. padding is inside the box*/ margin: 0px 0px; border-radius: 50px; /adds rounded corners the higher the value, the more curve the corners/ }
a:hover { background-color:#ff6969; }
ul.nav {/* we want to select the correct unordered list*/ margin:10px 0 0 0; list-style:none; float:right;
} ul.nav li {/selects all the list items in the nav bar/ float:left; margin-right: 40px; }
Adam Lake
3,810 Pointsthe italic bits haven't been commented out properly in the ul.nav li line.
Philip Allen
8,171 PointsHi Juliet
If you have a css folder with your stylesheet and another folder for your images then the correct path would be url('../img/purple-dot.jpg').
There is a really great article on this that should really help you understand. http://blog.teamtreehouse.com/how-to-fix-a-broken-image
Hope this helps.
Juliet DeAmicis
2,042 PointsHmm I read the blog and checked everything...still broken. This is so weird. I even tried a different image, and I redid the file pathway to make sure it was correct. Could it be something that's cascading? I have a grid.css and a normalize.css file as well, but they're the same as given in the first tutorial on the website design track.
Juliet DeAmicis
2,042 PointsI deleted everything and further simplified. Here's what I have:
Html <!DOCTYPE html> <html>
<head> </head>
<body> </body>
</html>
Css
body { background-image: url('juliet.jpg'); }
My file is in the same directory as the css folder...instead of in an image folder. but it's still now working! It's also my own photo. Any ideas???
Juliet DeAmicis
2,042 Pointshtml <!DOCTYPE html> <html>
<head> </head>
<body> </body>
</html>
Juliet DeAmicis
2,042 Pointshtml <!DOCTYPE html> <html>
<head> </head>
<body> </body>
</html>
Juliet DeAmicis
2,042 Pointshtml <!DOCTYPE html> <html>
<head> </head>
<body> </body>
</html>
Juliet DeAmicis
2,042 Pointshtml <!DOCTYPE html> <html>
<head> </head>
<body> </body>
</html>
Philip Allen
8,171 Pointsthe normalize.css shouldn't be a problem, especially as it should be placed before your own stylesheet as the cascade means that the code below. Simplest way to rule that out is to remove it.
I would suggest that you create a very simple html page and simple css file to test you have the correct path. Once you have that part working you can copy it back to your working files.
Juliet DeAmicis
2,042 Pointsthat's what i did and its still not working! I'm absolutely confuzules.
<head>
</head>
<body>
</body>
</html>
thats literally my html right now
Philip Allen
8,171 PointsSo you now have a folder with three files: index.html, styles.css and image.jpg?
your html should be
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
</body>
</html>
your css should be
body {
background: url('image.jpg')
}
if you place the stylesheet in a sub folder called css then your css file needs to change to
body {
background: url('../image.jpg')
}
if you then place the image in a folder called img the stylesheet needs to be
body {
background: url('../img/image.jpg')
}
if you place the image in the img folder but keep the stylesheet in the root folder then the css will be
body {
background: url('img/image.jpg')
}
Juliet DeAmicis
2,042 Pointsstill not working! heres' my code
<head>
<link rel="stylesheet" href="styles.css" type="text/css"/>
</head>
<body>
</body>
</html> ```
I checked to make sure they all matched!
CSS
body {
background-image: url('juliet.jpg') repeat;
}
Adam Lake
3,810 PointsThis may sound silly but is our css style sheet called styles.css or style.CSS?
Adam Lake
3,810 PointsThis may sound silly but is our css style sheet called styles.css or style.CSS?
Juliet DeAmicis
2,042 PointsJuliet DeAmicis
2,042 Pointsthat came out really weird... the html is this
<html>
<head> <title>Website Practice One</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link rel="stylesheet" href="css/normalize.css" type="text/css" media="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> <link href='http://fonts.googleapis.com/css?family=Averia+Libre:400,700,300italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/styles.css" type="text/css" media="screen"> </head>
<body> <div class="container clearfix">
</body> </html>