Change background of the navbar

This is due to the specificity of CSS, which is to determine which styles will have priority for the browser. If you declare an element a background: network through a class, then background: red using an ID and finally using an online style <nav style="background:red"></nav> the browser will set a hierarchy as follows:

1-ONLINE STYLES

2-ID

3-CLASS

When a! important is declared, the browser ignores the specificity and establishes the style even if it is only in one class. That is the reason why although you declare a background in your styles and add an important one, the browser ignores it and establishes the bootstrap, because the navbar is assigned a class .bg-lght that takes precedence over other classes. In these cases it is recommended that you reference your style sheet after the bootstrap CDN: example:

<link rel="stylesheet" href="bootstrap">
<link rel="stylesheet" href="susEstilos">

Without forgetting that you must establish! important to your styles, because if the browser has two classes with! important, it will give priority to the last one.

BOOTSTRAP

nav{
background: red !important
}

YOUR STYLES

nav{
background: red !important
}

Official documentation:

link

Modify the navbar classes

<nav class="navbar navbar-light" style="background-color: red;">
    <!-- Navbar content -->
</nav>

Bootstrap documentation

Delete the Bg-LIGHT and write a class you want, such as class="bg-personal"

Then in EL css

.bg-personal{
  background-image: url (Aqui va la url de tu imagen)
}