CSS

Wiley Conte
Wiley Conte
6,319 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!

Justin Moore
Justin Moore
4,756 Points

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
6,319 Points

Bingo! Thanks for that easy fix.