Locally stored Image Backgrounds


#1

I’m trying to set a background for one of my divs with some very simple code and the background wasn’t appearing which made me think there was a problem with the image so i tried to use a random picture of a koala bear from the internet and using the URL of the koala bear worked fine which made me think it was a problem with the path i was using for the image so i downloaded the picture of the koala bear and put it in the same folder as my css file and tried to use the locally stored picture of the koala bear that was right next to the css file and that also didn’t work which now makes me think the problem is some personal lack of knowledge.

Is there some specific image requirements or something I should know about? Are images only usable from a specific place in the file hierarchy or something? Here’s the css code I’m using but it’s straightforward so I don’t know if it will help and the browser I’m using is chrome just in case that has something to do with it.

 .main{
	background-image: url("bear.jpg");
	position: fixed;
	box-sizing: border-box;
	margin-top: -15px;
	margin-left: -15px;
	width: 100%;
	height: 100%;
	object-fit: contain;
  }

#2

What I’ve been doing is storing images under /src/assets/ where I’ve created an images folder. Then I reference it like so:

background: url('../assets/images/my-image.jpg');

#3

I could kiss you right now! I suppose that images used for backgrounds have to be in the assets folder. Thanks!