Bootstrap мобильное изображение увеличено

Question

Изображение на мобильном телефоне увеличено больше, чем я хочу. Картинки ниже должны показать вам, что я имею в виду.

Вот как это выглядит в разработке

Вот так это выглядит на моем телефоне

 html,
    body,
    .view {
      height: 1000px;
      background-attachment: fixed;
     background-position: center;
     background-repeat: no-repeat;

    }

    @media (max-width: 740px) {
      html,
      body,
      .view {
        height: 1000px;
      }
      a {
        font-size: 3.5vh;
        padding: 1.5vw;
      }
      .card {
        width:100%;
      }
    }
    @media (min-width: 800px) and (max-width: 850px) {
      html,
      body,
      .view {
        height: 600px;
      }
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="view" style="background-image: url('https://wallpaperstream.com/wallpapers/full/space/Dark-Space-Wallpaper.jpg'); background-repeat: no-repeat; background-size: cover; background-position: center center;">
               <div class="cover-container ph-auto h-100 row align-items-center" style="width: 100%;">
                <div class="cover-inner container content col text-center text-primary">
                 <h1 class="jumbotron-heading">Home</h1>
                 <p class="lead">Singing · Rapping · Screaming</p>
                </div>
               </div>
             </div>

Answer 1

Добавьте этот идентификатор к вашему первому div и удалите встроенный стиль

#background-image{
  background-image: url('https://wallpaperstream.com/wallpapers/full/space/Dark-Space-Wallpaper.jpg');
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -1;
  background-size: cover;
  background-position: 85% 50%;
  background-repeat: no-repeat;
}

first div

<div class="view" id="background-image">

Working example