CODEWITHSUNDEEP
htmlcsswebbackground-image
Charles Roth
Charles Roth

Reputation: 473

Background image will not appear on website

I have a mainContainer on my site that I want to add a background image to. When I try to add the image I use this css

#mainContainer {
  background-image: url(images/bg.jpg);
  background-size: cover;
  height: 100%;
  width: 100%;
}

The image is a safe size. I think 1000x1000 or something around there. When I try to refresh the page I get a strange error:

enter image description here

I am using bootstrap4. Does the error on top have anything to do with my image not displaying or is it something in the css?

Also this is how my file structure looks if it helps:

enter image description here

Thanks!

Upvotes: 1

Views: 53

Answers (2)

mmativ
mmativ

Reputation: 1414

Put this. 

#mainContainer {
  background-image: url(../images/bg.jpg);
  background-size: cover;
  height: 100%;
  width: 100%;
}

Upvotes: 3

dz902
dz902

Reputation: 5828

The image file is not in the folder. You probably want to change it to ../images/bg.jpg to if it is in assets/images/ folder instead of assets/css/images/.

Upvotes: 3

Related Questions