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

Wiley Conte
Wiley Conte
9,618 Points

CSS image calling issue

I'm coding a basic front end site and have a CSS file that is properly sourced in my index file calling for my jumbotron image like this:

.jumbotron {
background-image: url(Assets/img/myImage.jpg);
background-size: cover;
}

However, when the browser goes to pull the file, it is pulling from Assets/css/Assets/img/myImage.JPG and thus I am getting an ERR_FILE_NOT_FOUND in my console.

I was able to do a bootleg fix and pull my .css file out of the css folder and switch up the paths and file sourcing in my index file, but then I have to pull my .css file out of its .css folder and that is not best practice...

I'm using Bootstrap 4 if that is relevant. All other CSS in this .css file is working. The image is in Assets/img and there are no typos. Another clue is that Atom's autocomplete package is not pulling up myImage.jpg but is pulling up all other images in the img directory. I'm stumped but its surely an easy fix.

Any help is greatly appreciated, thank you all!

It sounds like you need to set the file path to go out of your css folder and into your images it should look something like this.

.jumbotron {
  background-image: url(../Assests/img/myImage.jpg);
  background-size: cover;
}

Hope this helps.

1 Answer

Wiley Conte
Wiley Conte
9,618 Points

Bingo! Thanks for that easy fix.