Я пытаюсь добавить полноэкранное фиксированное фоновое изображение только на первую страницу мобильного приложения jquery для Android (я также использую пробел в телефоне).
В двух словах, я бы хотел, чтобы фоновое изображение было полноэкранным и фиксированным, а содержимое страницы прокручивалось над ним. Фоновое изображение также необходимо масштабировать до размеров различных устройств.
Вот что у меня есть ...
<div data-role="page" id="unit-list" data-theme="a">
<div id="background">
<div data-role="header" data-theme="b">
<h1>Header</h1>
</div><!-- /header -->
<div data-role="content" data-theme="a">
<ul data-role="listview" data-theme="none">
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</div><!-- /content -->
</div><!-- /background -->
</div> <!-- /page -->
С этим CSS:
#background {
background: url(../images/background.png);
width: 100% !important;
height: auto !important;
background-repeat: no-repeat;
position: absolute;
z-index: -1;
}
Это, очевидно, не работает, поэтому любое движение в правильном направлении будет оценено, заранее спасибо.