title: tizen - how to set background for all html app pages
body: <p>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?</p>
  
  <p>first:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div data-role="page" id="one" style="display:block;text-align:center;background: url('1.png') no-repeat center center fixed; background-size: cover"&gt;
      &lt;div data-role="header" id="oneheader" data-position="fixed" style="border: 5;background: Transparent;"&gt;
        &lt;h2&gt;&lt;font color="#000000"&gt;text&lt;/font&gt;&lt;/h2&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
  
      &lt;div data-role="content"&gt;
        &lt;p&gt;text&lt;/p&gt;
        &lt;p&gt;
          &lt;a href="second.html" data-role="button" data-style="round" id="btn" style="border: 5; background: #FFFFFF;"&gt;text&lt;/a&gt;
        &lt;/p&gt;
      &lt;/div&gt;&lt;!-- /content --&gt;
  
      &lt;div data-role="footer" id="onefooter" data-position="fixed"&gt;
        &lt;h4&gt;text&lt;/h4&gt;
      &lt;/div&gt;&lt;!-- /footer --&gt;
  
    &lt;/div&gt;&lt;!-- /page --&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>second:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div data-role="page" id="one" style="display:block; text-align:center"&gt;
      &lt;div data-role="header" id="oneheader" data-position="fixed"&gt;
        &lt;h1&gt;text&lt;/h1&gt;
      &lt;/div&gt;&lt;!-- /header --&gt;
  
      &lt;div data-role="content" style="display:block;text-align:center"&gt;
        &lt;p&gt;&lt;a href="page3.html" data-role="button"data-style="round" id="btn"style="border: 5; background: #FFFFFF"&gt;text&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
        &lt;div data-role="footer" id="onefooter" data-position="fixed"&gt;
          &lt;h4&gt;text&lt;/h4&gt;
        &lt;/div&gt;&lt;!-- /footer --&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>css file:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>At the img you can see button from the first page between buttons on the second</p>
  
  <p><img src="https://i.stack.imgur.com/rlQkx.png" alt="img"></p>