0

I am building a website where I want the background image to be attached fixed. I have achieved this in desktop browsers with the CSS below, but it doesn't work on Smartphone. This is a known bug with background-attachment: fixed. I don't know how to fix it.

#page-header{
  height: 300px;
  background: url("../img/wood.jpg");
  background-attachment: fixed;
  color: #fff;
  border-bottom: 1px #eee solid;
  padding-top: 50px;
}

My HTML 

<header id="page-header">
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3 text-center">
        <h1 id="h1header">Products</h1>
        <p>Local, Organic, Tasty</p>
      </div>
    </div>
  </div>
</header>

You can find my website at http://maisonbergeret.com/product.html

My question is how can I keep the exact same effect.

Francois BF
  • 1
  • 2
  • 1
    Possible duplicate of [this](https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios) and [this](https://stackoverflow.com/questions/38517364/background-attachment-fixed-not-working-on-android-ios) and [this](https://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile) – ryan.d.williams Sep 10 '17 at 04:49
  • 1
    Possible duplicate of [background: fixed no repeat not working on mobile](https://stackoverflow.com/questions/26372127/background-fixed-no-repeat-not-working-on-mobile) – KalyanLahkar Sep 10 '17 at 04:55
  • Thank you for the link but it doesn't have the same effect. – Francois BF Sep 10 '17 at 05:20

1 Answers1

0

This is what I changed for page-header.

#page-header:before{
  content: "";
  width: 100%;
  height: 300px;
  position: fixed;
  background: url("../img/wood.jpg")no-repeat center center;
  color: #fff;
  border-bottom: 1px #eee solid;
  padding-top: 50px;
  z-index: -10;
  display: block;
  left: 0;
  top: 0;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

Below the header, I have a section product with id="products"

section#products{
    background-color: #FAEBD7;
}

Same color as my body background-color: #FAEBD7;

Adjusted margins and now it works.

Francois BF
  • 1
  • 2