0

I have a web with bootstrap 3.0 with this structure of sections:

<html>
<header>
</header>
<body>

<div class="container" id="section1">
        <div class="row">
      <div class="col-lg-12 section">
        <header>
        <h3 ></h3>
        <h4></h4>
        </header>

      </div>
    </div>
</div>
<div class="container" id="section2">
        <div class="row">
      <div class="col-lg-12 section">
        <header>
        <h3 ></h3>
        <h4></h4>
        </header>

      </div>
    </div>
</div>
</body>
</html>

I tried to put a background image fixed and cover in each div "container". In higher devices works great but in ipad and iphone it doesn't work. This is my css for section1:

    #section1{
    background-color: transparent;
    background-image: url("img/about.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed !important;
    background-position: center top;
    background-clip: border-box;
    background-origin: padding-box;
    margin-top: 50px;
    padding-top: 120px;
    min-height: 700px;
    width: 100%;
    background-size: cover;
}

I tried various solutions read in posts and Google, but nothing seems to work. Any ideas? Thanks in advance

Trenton
  • 49
  • 12
  • 1
    Have you seen http://stackoverflow.com/questions/9779195/does-a-background-attachment-of-fixed-work-in-ios5? – Willem Van Bockstal Oct 28 '13 at 16:55
  • Yes I read it but doesn't work. Maybe I didn't understand in my example the structure would be `
    ` and css properties would be in background id? Because using position= fixed in section1 id doesn't work.     – Trenton Oct 29 '13 at 00:42
  • 1
    Check the answer with 10 votes. id=background is fixed, an has a background. – Willem Van Bockstal Oct 29 '13 at 09:50
  • @WillemVanBockstal it works like a charm for first div background. But when I add another div bakcground in another section second image overlap the first one :S I tried fixing usin z-index but no work – Trenton Oct 29 '13 at 10:38
  • 1
    I missed the part where you said 'each' div. (Original question title was about 'a' div). This seems harder to solve, I guess you need javascript for that, but is it worth the effort (and performance hit)? – Willem Van Bockstal Oct 29 '13 at 13:29
  • thanks @WillemVanBockstal I will try to search some javascript for that ;) – Trenton Oct 29 '13 at 14:58

0 Answers0