0

On my website, I want that the background does not move at all, while the content scrolls in the foreground normally over the background. This effect is working perfectly on my macbook. I have tested it with Safari, Chrome and Firefox. Now when I open the website on my iPhone, the background images are covering the whole div container, not just the screen, which means that the image is way too big and not sharp anymore.

HTML:

<div id="tf-home" class="text-center">
    <div class="overlay">
        <div class="content">
            <h1>EURE <strong><span class="color">FLUCHT</span></strong> beginnt an diesem Ort</h1>
            <a href="#tf-about" class="fa fa-angle-down page-scroll"></a>
        </div>
    </div>
</div>

CSS:

#tf-home {
  background: url(../img/header.jpg);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100%
  color: #cfcfcf;
}

I hope that someone can help me.

Thank you in advance :)

andreas
  • 16,357
  • 12
  • 72
  • 76
Trinkflasche93
  • 79
  • 1
  • 8

1 Answers1

-1

here you have a jsfiddle

#tf-home {
  background: url(https://www.google.com/work/images/logo/google-for-work-social-icon.png);
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  min-height: 100vh;
  color: #cfcfcf;
}
Edison Biba
  • 4,384
  • 3
  • 17
  • 33