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
Bob Sutherton
20,160 PointsMystery: background image won't display, tried everything
I downloaded a background image from subtleimages.com and tried to apply it to my project. I was following along with Guil in the CSS deep dive and building my project.
The background-image property simply will not work in my CSS. I have tried so many different ways, and I simply can't get an image to display from CSS. I have tried:
background-image: url('img/oldmoon.jpg');
Someone in another thread, as well as several people on the web, have suggested that you must back out of the CSS file before linking to the image file. So I tried this:
background-image: url('../img/oldmoon.jpg');
To no avail. I don't understand what is going on. It is quite frustrating. I am running out of things to try here.
Bob Sutherton
20,160 PointsC:\Users\James\Desktop\Portfolio\img
Tabish Rafique
5,913 Pointsplace this link in your index.html page are you able to open it <a href="img/oldmoon.jpg>Open Image</a>
Bob Sutherton
20,160 PointsWhich link and where in the HTML should I place it?
5 Answers
Bob Sutherton
20,160 PointsSo, I decided to delete all my CSS and start afresh. When I did, the background began to work. I think I pinpointed that the problem was this:
background-image: url('../img/oldmoon.jpg');
background: #111;
The problem seems to have been that I used the "background" shorthand to set the color instead of "background-color". This was causing, apparently, the color to override the background image.
Tabish Rafique
5,913 PointsYes exactly
James Barnett
39,199 PointsNice job troubleshooting your issue
Wendel Ferreira
4,258 PointsI had the same problem with this png that I downloaded from subtle patterns!
Bob Sutherton
20,160 PointsYes the image is placed in the "img" folder and the index.html file is placed in the project folder which I named "portfolio".
Tabish Rafique
5,913 Pointsadd this code html <a href="img/oldmoon.jpg">Open Image</a> in your index.html file are you able to open it. ?
Bob Sutherton
20,160 PointsYes, indeed. It opens to a new page with the image.
Tabish Rafique
5,913 Pointsokay then set width of that element on which you are applying this background image. try setting width to 400px, same height and refresh
Tabish Rafique
5,913 PointsCould you please mention complete path where your image is placed ? i mean is it placed in img folder? and where is your index.html file?
Bob Sutherton
20,160 PointsNothing happened.
.wrapper {
background-image: url('img/oldmoon.jpg');
width: 400px;
height: 400px;
}
Yoke Lee
2,871 PointsPath in CSS file really depends on the location of the CSS snippet you're loading. eg this is the folder structure:
/project
- index.html
/img
- oldmoon.jpg /css
- screen.css (suppose you state .wrapper here)
then when you load index.html that contains .wrapper and linked the screen.css, the CSS engine will read the path as: localhost/css/img/oldmoon.jpg (which is incorrect)
in this case, changing it to ../img will solve the issue.
Tabish Rafique
5,913 PointsTabish Rafique
5,913 PointsCould you please tell the complete path of your image?