Полноэкранное фоновое изображение не работает в Firefox

Question

Я пытаюсь добавить полноэкранное фоновое изображение на страницу.Код, который я написал, показывает полное изображение на Chrome, но показывает только половину экрана в Firefox.Я использовал VW и VH.но это не подходит к экрану.Это показывает полосу прокрутки.Я попытался некоторый код, который из переполнения стека.Но никто из них не работает здесь.Пожалуйста, помогите мне исправить это.Заранее спасибо.

body,
html {
  height: 100%;
  margin: 0;
}

.welcome-wrap {
  background: url('https://cdn.paperindex.com/piimages-new/welcome/paper.jpg');
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  background-position: center;
}

.welcome-wrap-bg {
  background: rgba(12, 42, 59, 0.8);
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.welcome-img {
  max-width: 100px;
}

.welcome-greet1 {
  font-size: 36px;
  font-weight: 700;
  color: #ffcc29;
  text-align: center;
  margin-top: 15px;
}

.welcome-greet2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.smile {
  max-width: 32px;
}

<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<main class="welcome-wrap">
  <div class="welcome-wrap-bg">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 text-center">
          <img class="welcome-img" alt="success" src="https://cdn.paperindex.com/piimages-new/welcome/congrates1.svg">
          <h2 class="welcome-greet1">CONGRATULATIONS!!</h2>
          <h1 class="welcome-greet2">[Site Name] Welcomes You <img class="smile" alt="Smile" src="https://cdn.paperindex.com/piimages-new/welcome/smile.svg"></h1>
          <div class="text-center mrgn-top-50">
            <a href="/dashboard/buying/submit-RFQ.html" class="btn btn-pi radius-2 btn-md" data-original-title="" title="">Create Your Company Profile&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

Answer 1

попробуйте сделать ваш кросс-браузер размером с фон, это означает, что вы добавите следующий код к вашему селектору css:

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

, чтобы ваш окончательный код был таким:

body,
html {
  height: 100%;
  margin: 0;
  overflow:hidden;
}

.welcome-wrap {
  background: url('https://cdn.paperindex.com/piimages-new/welcome/paper.jpg');
  width: 100%;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-attachment: fixed;
  position: relative;
  background-position: center;
}

.welcome-wrap-bg {
  background: rgba(12, 42, 59, 0.8);
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.welcome-img {
  max-width: 100px;
}

.welcome-greet1 {
  font-size: 36px;
  font-weight: 700;
  color: #ffcc29;
  text-align: center;
  margin-top: 15px;
}

.welcome-greet2 {
  font-size: 32px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}

.smile {
  max-width: 32px;
}

<link href="https://cdn.paperindex.com/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<main class="welcome-wrap">
  <div class="welcome-wrap-bg">
    <div class="container-fluid">
      <div class="row">
        <div class="col-sm-12 text-center">
          <img class="welcome-img" alt="success" src="https://cdn.paperindex.com/piimages-new/welcome/congrates1.svg">
          <h2 class="welcome-greet1">CONGRATULATIONS!!</h2>
          <h1 class="welcome-greet2">[Site Name] Welcomes You <img class="smile" alt="Smile" src="https://cdn.paperindex.com/piimages-new/welcome/smile.svg"></h1>
          <div class="text-center mrgn-top-50">
            <a href="/dashboard/buying/submit-RFQ.html" class="btn btn-pi radius-2 btn-md" data-original-title="" title="">Create Your Company Profile&nbsp;<i class="fa fa-chevron-circle-right" aria-hidden="true"></i></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

, если он не работает, убедитесь, что Firefox обновлен, если это так, удалите куки из Firefox и обновите страницу, удачи