To achieve what I think you are trying to do, you have to change the panel background style in App Starter/App Framework applications.
The css file af.ui.css applies the style guidelines of each of the underlying platforms so iOS apps will look like iOS widgets, Android apps like Android, Windows like Windows, etc.
App Starter uses App Framework and creates a starter layout for you using a panel. When you change the background color it is overwritten by af.ui.css because the panel is rendered on top of the body background.
Using Intel XDK version 876:
- Click on Start a New Project
- Click Use App Starter
- Click on Develop tab
- Click on Code button
- Change line 41 or the div class "panel" to : div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected" style="background-color: blue;" (see code below)
- Click File >> Save
- Click on Design button
Panel background should be blue.
You need to place your html div tags after the head tags into the body tags. This is where your user visible content should always go. See below:
<body>
<div id="afui" class="ios">
<div id="header" class="header"></div>
<div id="content" style="">
<div class="panel" title="Main" data-nav="nav_0" id="main" selected="selected"
style="background-color: blue;">
<a class="button" href="#" style="" data-appbuilder-object="button">Hello World</a>
</div>
</div>
<div id="navbar" class="footer">
<a href="#main" class="icon home">Home</a>
</div>
<header id="header_0" data-appbuilder-object="header">
<a id="backButton" href="#" class="button backButton" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">test</h1>
</header>
<nav id="nav_0" data-appbuilder-object="nav">
<h1>Side Menu</h1>
</nav>
</div>
</body>
I was able to reproduce the body tag disappearing, this is because AppStarter tries to parse the layout for the Design view and sometimes removes tags it doesn't understand. I will file a bug for you for the Intel XDK that setting style on the body tag in App Starter should not delete or modify existing tags.