Hello. Connected bootstrap, indicated the background image, but for some reason it is not displayed. Here is what is written in css:

.bg { background: url(../img/bg_0.jpg); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

}

And html:

 <body> <div class="main"> <div class="bg"> <!-- Navigation begining --> <nav class="navbar navbar-default navbar-fixed-top navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <img src="img/smart_logo.png" alt="logo" width="200" class="smartLogo"> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav navbar-right navMenu"> <li><a href="#">ABOUT</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">SERVICES</a></li> <li style="margin-right: 50px;"><a href="#">CONTACTS</a></li> <li class="lang"><a href="#"> <img src="img/lang.png" alt="language" width="20"> ENG</a></li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </div>

  • And you set the background image of what element? - humster_spb
  • I apologize, formatted the code incorrectly. now everything is clear - class bg. - sheia
  • Because everything is on float? - Qwertiy ♦
  • @Qwertiy, yes no no - sheia

3 answers 3

By the presented code, you can see that your image div is under the navbar.

The .navbar-default and .navbar-inverse have background-color and border-color properties. Here they just overlap your div with the background property.

There are several solutions:

  1. Override the .navbar-default and .navbar-inverse
  2. Bring your bg div to the inside of a nav element with a .navbar class
  3. Apply your bg class to the nav element with the .navbar class

    Try writing the full path to the image in css. You just have a problem with the ways.

    • No, this is definitely not the path, as I was looking for the cause of the error on my own. Moreover, no errors are detected during debugging. - sheia
    • one
      Open through crome the source code of the page, find where you should have a background image and see if it opens correctly in a new tab. Do you have any styles in the head block? As in the code given by you it is not visible. - Alexander
    • It’s not visible in the code, but they are connected correctly, for some reason I don’t manage to place the code here completely. The source code of the page shows it correctly, but the page itself looks just white. - sheia
    • The closing tags </ div> are all in place? - Alexander
    • Yes, all to the last, rechecked again. - sheia

    In CSS, you just need to replace .bg with nav