CSS - Background-image

Question

I have set background-image for my menu's background, as for the black bar behind the menu: http://www.cochlea.co.il/

  background-image: url("http://www.cochlea.co.il/wp-content/uploads/2015/07/bar.png");
  background-repeat: no-repeat;
  background-position: inherit;

But, sometimes the black background won't load. and sometimes when you scroll down and then up, it disappears.

What's the problem?

Thanks so much.

Answer 1

I noticed that it is getting hide whenever we are scrolling down.

Well how about if you remove the background-image and allow the background to be black?

Use this code

    .main-navigation ul {
      list-style: none;
      margin: 0;
      display: inline;
      background: #000;
      padding: 5px;
      border-radius: 28px;
      padding-left: 30px;
      padding-right: 30px;
    }
.theNavigationBar {
  position: absolute;
  width: 100%;
  top: 15px;
  left: 0;
  text-align: center;
  font-weight: bold;
  /* background-image: url("http://www.cochlea.co.il/wp-content/uploads/2015/07/bar.png"); */
  /* background-repeat: no-repeat; */
  /* background-position: inherit; */
  /* letter-spacing: 0.5px; */
}

It will do the same purpose of what is your background-image is doing. So simply use the above code.