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

CSS Build a Simple Website Styling Content Fonts and Colors

Aaron Feltman
Aaron Feltman
8,434 Points
Posted by Aaron Feltman
Aaron Feltman
8,434 Points

Back ground Image

I am attempting to add the bg-img.jpg. However it does not render in my browser. I am using Good Chrome on windows 7. Initally to get the CSS to work at all i created a project file on my desktop.

I know the style sheet is linked correctly because the Hex color #420600 will show up as the background.

I removed all the folders from Sublime text 2 and then re-added it but it still did not work work. All the images correctly display. I am thinking something is wrong with how the url is pointing to the file

The following is the code I created in style.css. background: #420600 url('project/css/img/bg-texture.jpg') repeat;

3 Answers

Andrew McCormick
Andrew McCormick
17,730 Points
Andrew McCormick
Andrew McCormick
17,730 Points

have you used dev tools (f12) to see what the image isn't loading or to make sure that it's in the css? Typically if it is linked correctly, then you will see where the background image is in the css, then when you hover over the link in dev tools it will tell you something like (image not found). That would indicate there is something wrong with the path.

ptrkcsk
ptrkcsk
23,084 Points
ptrkcsk
ptrkcsk
23,084 Points

Multiple CSS background values need to be comma-separated, and only the last can be a color:

div {
    background: url('project/css/img/bg-texture.jpg') repeat, #420600;
}

Source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_multiple_backgrounds

Andres Aguero
Andres Aguero
30,545 Points
Andres Aguero
Andres Aguero
30,545 Points

I believe that you have to use the div{ background-image: url('project/css/img/bg-texture.jpg') repeat; }

You are using the "background:" instead of "background-image:"

ptrkcsk
ptrkcsk
23,084 Points

background-image should not be used in this case.

The background CSS property is a shorthand that can be used to set the value for background-image.

https://developer.mozilla.org/en-US/docs/Web/CSS/background