Search code examples
htmlcssbootstrap-4background-image

CSS background-image url() not showing with error '404 not found' in various browsers

I'm building a bootstrap-4 project in Atom editor and my problem is that my CSS background-image url() is not showing... I can see the file present in my developer console but with the error-Failed to load resource: the server responded with a status of 404 (Not Found).

Before all of you guys mark my question as a duplicate etc. please give me a chance to say that i have gone through almost all of the existing questions regarding this issue but everything i have tried so far has not worked and its really frustrating.

I have tried every single file path adjustment with no result. If this is something simple then i hope the code gods of stackoverflow have some mercy upon this question i am almost intermediate level so i will appreciate the help. Thanks in advance.

my file structure: https://i.sstatic.net/UmuOR.jpg

body {
  overflow-x: hidden;
  font-family: 'Poppins', sans-serif;
  color: #505962;
}



.navbar {
  font-weight: 400;
  font-size: 1.2rem;
  background: rgba(0, 0, 0, 0.6)!important;
}

#gint {
  word-spacing: 1.5px;
}

.navbar-dark .navbar-nav .nav-link {
  color: white;
}

.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
  color: #1ebba3;
}

/*--start landing page--*/
.home-inner {
  background-image: url(images\landing.jpeg);
}
Solution

  • Assuming that the file path is correct, I see two problems for you:

    1. You should use a forwards slash, not a backwards slash – i.e., images/landing.jpeg, not images\landing.jpeg
    2. You need quotes around the file path, inside the parentheses: background-image: url('images/landing.jpeg')