tizen - how to set background for all html app pages

Question

I have an html app with 2 pages, both of them have header footer an div content with buttons. I tryed to set background image to the first "page" div and make all other divs in css file Transparent. It works ok, but at the second page I can see the buttons from the first page at scrolling. How can I change this to make buttons from the first page invisible on the second?

first:

<body>
  <div data-role="page" id="one" style="display:block;text-align:center;background: url('1.png') no-repeat center center fixed; background-size: cover">
    <div data-role="header" id="oneheader" data-position="fixed" style="border: 5;background: Transparent;">
      <h2><font color="#000000">text</font></h2>
    </div><!-- /header -->

    <div data-role="content">
      <p>text</p>
      <p>
        <a href="second.html" data-role="button" data-style="round" id="btn" style="border: 5; background: #FFFFFF;">text</a>
      </p>
    </div><!-- /content -->

    <div data-role="footer" id="onefooter" data-position="fixed">
      <h4>text</h4>
    </div><!-- /footer -->

  </div><!-- /page -->
</body>

second:

<body>
  <div data-role="page" id="one" style="display:block; text-align:center">
    <div data-role="header" id="oneheader" data-position="fixed">
      <h1>text</h1>
    </div><!-- /header -->

    <div data-role="content" style="display:block;text-align:center">
      <p><a href="page3.html" data-role="button"data-style="round" id="btn"style="border: 5; background: #FFFFFF">text</a></p>
    </div>
      <div data-role="footer" id="onefooter" data-position="fixed">
        <h4>text</h4>
      </div><!-- /footer -->
  </div>
</body>

css file:

body {
}

#one { 
  background: Transparent;
  /*background: #06CF7B;*/
  color: #000000;
  font-family:"Times New Roman", Times, serif;
}

#oneheader {
  background: Transparent;
  color: #000000;
  font-family:"Times New Roman", Times, serif;
}

#onefooter {
  background: Transparent;
  color: #000000;
}

#btn {
  width: 230px;  height: 40px;
  margin: 0 auto;
  /*data-style: round;*/
  border: #000000;
  border-style: solid;
  border-width: 5px;
  font-family:"Times New Roman", Times, serif;
}

At the img you can see button from the first page between buttons on the second

You're missing a closing `` for `content` on your second page. — Albzi, Apr 02 '14 at 13:12

score 0 · Answer 1 · answered Apr 04 '14 at 19:14

<body>
  <div data-role="page" id="one" style="display:block; text-align:center">
    <div data-role="header" id="oneheader" data-position="fixed">
      <h1>text</h1>
    </div><!-- /header -->

    <div data-role="content" style="display:block;text-align:center">
      <p><a href="page3.html" data-role="button"data-style="round" id="btn"style="border: 5; background: #FFFFFF">text</a></p>
    </div>

    <div data-role="footer" id="onefooter" data-position="fixed">
      <h4>text</h4>
    </div><!-- /footer -->
  </div>
</body>

Your footer is on content tag

tizen - how to set background for all html app pages

1 Answers1