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
Matthew Jones
999 PointsBackground-Image Trouble
I have been trying to add a background image to my workspace file for a webpage. For some reason, this is not working like it should. I have opened a completely new workspace to test it out. My workspace is bare-bones and everything is closed right, the only thing difference is that I have added a in which to place the image. I have even tried the html and body tags to house my image. My CSS looks like this: css div { background-image: url("img/GreenLine.jpg"); } I have also tried: css body, div { background-image: url("img/GreenLine.jpg"); } Nothing works
8 Answers
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsHey thanks for providing source code. According to your file structure your css file is located in css folder so you need to go one directory up in order to access img folder. You can do it by adding "../"
div {
background-image: url("../img/GreenLine.jpg");
height: ???
width: ???
}
Or you can just move your css file next to index.html but don't forget to edit link tag in your index file.
Matthew Jones
999 PointsThank you Tobias, it finally worked for me.
Ken Alger
Treehouse TeacherMatthew;
One way to do it is to have something like this in CSS
body {
background-image: url('img/bg-texture.jpg');
}
That would allow your image to be in the background of the body tag. You would typically set a repeat value as well so insure that the image would repeat to fill the screen...
body {
background-image: url('img/bg-texture.jpg') repeat;
}
You generally also want to assign a background-color as well, should the image not be available.
body {
background-image: url('img/bg-texture.jpg') repeat;
background-color: #420600;
}
The above can be reduced as well to:
body {
background: #420600 url('img/bg-texture.jpg') repeat;
}
Post back with any addition questions or if you need more clarification. Remember, the background of an element is the total size of the element, including padding and border (but not the margin). By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally.
Happy coding,
Ken
Matthew Jones
999 PointsHey Ken, I have tried all of the ways, and neither returns any results for me. I do not know what it is.
Ken Alger
Treehouse TeacherMatthew;
Would you mind posting your code using the Markdown Cheatsheet format so we can see exactly what you have, or edit your original post for clarification?
Thanks,
Ken
Matthew Jones
999 Points
Tobiasz Gala
Full Stack JavaScript Techdegree Student 23,529 PointsMake sure that your style sheet is linked correctly. U can check that by adding
body { background-color: green; }
If your background will change that means your style sheet is linked correctly.
Make sure that there is an image in "img" folder called "GreenLine.jpg". Capital "G and L ( it's case sensitive)
Try to add width and height to css rules
div {
background-image: url("img/GreenLine.jpg");
height: ???
width: ???
}
If you still have a problem please provide source code.
In my experience, there is sometimes problem with Workspace. When you edit your code and click preview button it does not make a changes to our document until we refresh a page. So try to click preview and hit ctrl + r to refresh a website maybe that is a problem.
Matthew Jones
999 PointsHi, Tobias Thank you for the reply. I tried to instead use the background-color attribute and it worked, but the background-image is still faulty. Here is my html screenshot: http://www.screencast.com/users/mjjply12/folders/Default/media/1b491569-307c-49d4-9da5-c8f1fb1c5e39
And here is my CSS: http://www.screencast.com/users/mjjply12/folders/Default/media/78a5db20-434a-4a75-9b0f-059d5e60fadd
Rob Draper
Courses Plus Student 5,812 PointsIn order for background images to be visible the elements you are adding a background image to must must have a height associated to them. In this example the image being has a heigt of 200px. Therefore setting a height of 200px for the div allows the image to be visible. I have attached a pen as an example.
Matthew Jones
999 PointsI took a look at your pen Rob, and it still does not work even if I give the Div the height and width parameters of the image itself. I have even tried with another photo and nothing new happened. Could it be the Chrome browser that is iterferring?
Rob Draper
Courses Plus Student 5,812 PointsCould you put the html and css in a codepen "pen" or post? I can work it out through there and send you the proper fix for the issue. Chrome should not be the reason that it was not working.
Rob Draper
Courses Plus Student 5,812 PointsMatthew going by the exact structure in your example the path should look like this:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="/css/main.css"/>
</head>
<body>
<div>
<!--THIS IS CONTAINER FOR THE BACKGROUND IMAGE-->
</div>
</body>
</html>
MAIN.CSS
body {
background: #000; /*you can use whatever color that you want here*/
}
div {
background-image: url("/img/GreenLine.jpg");
height:120px;
}
Matthew Jones
999 PointsThank you to everybody who helped, have finally fixed the problem.
Matthew Jones
999 PointsMatthew Jones
999 Points....difference is that I have added a DIV in which to place the image.