Смешивание джумботрона в фоновое изображение

Question

, поэтому я пытаюсь смешать мой джумботрон с фоновым изображением. Я хочу, чтобы был виден только текст, а не белый фон самого jumbortron. Я пытался использовать фон: нет; и цвет фона: прозрачный; но безрезультатно. Кто-нибудь может помочь?

body, html {
  height: 100%;
  background-color: #fff;
}

.bg {
  background-image: url("../images/home-office.jpg");

  height: 100%;    

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.jumbotron {
    background: none;
}

<!--********TOP JUMBOTRON********-->

    <header class="jumbotron bg" id="landing-view">
            <div class="container top">
                <h1 class='name'>Conor Humphreys</h1>
                <p class='title'>Full-Stack Software Developer</p>
            </div>
    </header>

Answer 1

Вы перезаписываете background вашего div, когда устанавливаете .jumbotron {background: none}. Вы должны переместить .jumbotron {background: none} над селектором .bg в CSS.

Answer 2

Надеюсь, это правильный способ решения этой проблемы:

Я изменил код в соответствии с предложением @damnitrahul (см. Фрагмент), и он работает так, как он указал. Так как изображение из этого фрагмента недоступно, я добавил красный цвет фона.

body, html {
  height: 100%;
  background-color: #fff;
}

.jumbotron {
    background: none;
}

.bg {
  background-image: url("../images/home-office.jpg");

  height: 100%;    

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: red;
}

<!--********TOP JUMBOTRON********-->

    <header class="jumbotron bg" id="landing-view">
            <div class="container top">
                <h1 class='name'>Conor Humphreys</h1>
                <p class='title'>Full-Stack Software Developer</p>
            </div>
    </header>

Чтобы проверить это, отредактируйте этот фрагмент и в вашем css переместите .bg выше .jumbotron, как у вас, и вы увидите красный фон исчезают.

Я полагаю, что вы не видели результат, когда следовали совету @ damn, потому что путь к изображению или имя файла неверны.

Пожалуйста, примените любые отклики к ответу @ damnitrahul.