Блог

Главная - Вопросы по программированию - фон некорректно отображается на мобильных устройствах

фон некорректно отображается на мобильных устройствах

#html #css #background #size

#HTML #css #фон #размер

Вопрос:

Итак, я недавно изменил свой 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">amp;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. Пожалуйста, приведите пример

2. imgur.com/a/y56b6Pb

3. Я имею в виду фрагмент кода

4. отредактировал мой пост и добавил

5. Добавьте также HTML-код.

Ответ №1:

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

 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">amp;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>