CODEWITHSUNDEEP
htmlcssbackgroundsize
edo
edo

Reputation: 41

background appears incorrectly on mobile

So I lately changed my background-size to 100% 100%, cover;

But it does not appear well on mobile. Basically the width is correct but the height is just messed up, split althougt the whole screen after scrolling down. I feel like I am missing something.

Example: 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>

Upvotes: 1

Views: 46

Answers (1)

Chris_00
Chris_00

Reputation: 406

Since I don't have your original background image, I use an online one. Hope this is what you are trying to achieve.

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>

Upvotes: 1

Related Questions