фон отображается неправильно на мобильном телефоне - PullRequest
Новая
       8

фон отображается неправильно на мобильном телефоне

1 голос
/ 16 марта 2019

Таким образом, я недавно изменил свой background-size на 100% 100%, покрытие;

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

Пример: https://imgur.com/a/y56b6Pb0

  width: 100%;
    height: 100%;
    font-family: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    background-color: black;
    margin: 0;
    padding: 0;
    background-color: #242424;
    background-image: url(/assets/img/bg1.jpg);
    background-size: 100% 100%, cover, cover !important;
    background-repeat: no-repeat;
    background-attachment: fixed;
    overflow-x: hidden;

html 

<body id="page-top" style="background-size: cover; background-repeat: no-repeat;">
<div id="page-loader" class="showme">
    <div>
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    </div>
</div>

<div id="cookies-information" class="alert alert-info alert-dismissable">
    <a href="#" id="cookie-info-close" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <p>This site uses cookies — small text files that are placed on your machine to help the site provide a better user
        experience. <a href="https://www.whatarecookies.com" target="_blank">Read more</a></p>
</div>

<div id="image-modal">
    <img src="https://placehold.it/600x400">
    <button class="btn btn-default">Close</button>
</div>

<div id="main-menu">
    <div class="menu-logo">
        <a href="/">
            <img src="assets/img/logo.png" style="width:90px;height:auto;">
        </a>
    </div>

1 Ответ

1 голос
/ 16 марта 2019

Поскольку у меня нет вашего исходного фонового изображения, я использую онлайн. Надеюсь, это то, что вы пытаетесь достичь. 

html {
  height: 100%;
}

body {
  /* The image used */
  background-image: url("https://www.w3schools.com/howto/img_girl.jpg");
  /* Full height */
  height: 100%;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
<body>
  <div id="page-loader" class="showme">
    <div>
      <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
    </div>
  </div>

  <div id="cookies-information" class="alert alert-info alert-dismissable">
    <a href="#" id="cookie-info-close" class="close" data-dismiss="alert" aria-label="close">&times;</a>
    <p>This site uses cookies — small text files that are placed on your machine to help the site provide a better user experience. <a href="https://www.whatarecookies.com" target="_blank">Read more</a></p>
  </div>

  <div id="image-modal">
    <img src="https://placehold.it/600x400">
    <button class="btn btn-default">Close</button>
  </div>

  <div id="main-menu">
    <div class="menu-logo">
      <a href="/">
        <img src="assets/img/logo.png" style="width:90px;height:auto;">
      </a>
    </div>
...