Как заставить мой "джумботрон" реагировать?

Question

.jumbotron{
  width:100%;
  height:50vh;
  background: url('longboard.jpeg');
  color:white;
}

Я пытаюсь построить "джумботрон" с нуля. В настоящее время HTML для него просто ничего. На данный момент картинка просто обрезается с правой стороны, в то время как моя панель навигации масштабируется вниз. Я хотел бы, чтобы фоновая картинка также уменьшалась вместе с ним. Как мне это сделать?

Кроме того, всякий раз, когда я добавляю a или anythign в div, над моей панелью навигации появляется поле, к которому я не подключен. Извините заранее, если я нарушил этикет, это мой первый пост здесь.

Answer 1

Самый простой способ - установить размер фона на "cover"

.jumbotron {
background-image: url('longboard.jpeg');
background-size: cover;
height:50vh;
color:white;
}

Answer 2

Может быть попробовать это:

.jumbotron {
    background: url('longboard.jpeg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 50vh;
    width: 100%;
    overflow: hidden;
    color: white;
}

Ресурс - https://css -tricks.com / perfect-full-page-background-image /