Background: Fixed No Repeat Not Working on Mobile

background-repeat: no-repeat; is not working

You should put the background-repeat: no-repeat; to the body, and not to the body::before. Also add min-height: 100%to your html

html{
  min-height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
}

body{
    height: 100%;
    background-repeat: no-repeat;
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.container{
  display:flex;
  align-items:center;
  height: 100%;
}

The purpose of the .container is to center the video vertically.

Here is also the html code:

<div class="container">
  <div class="outer">
    <div class="tcell">
      <div class="video-wrapper">
        <div class="ratio-keeper">
          <div class="video video-frame"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Fixed Background Image for Mobile with CSS

background-attachment: fixed; does not work on mobile webkit. There is a workaround, you can place the image inline in the html, set the position fixed and z-index below the content.

this is related Using background-attachment:fixed in safari on the ipad

Related Topics