I am making a tab for mobile device in phonegap. I want to add image as background for the tabs. The problem is that it does not add any background image. here is my directory structure
images are in this folder
www/img/tabs.png
In css below I am using path to images like this url(./img/tabs.png) top left no-repeat; which does not work. here is are my css files
www/stylesheet/css/frames/footer.css
here is are all of my pages located
www/pages/home.html
and here is my css
footer {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
width: 100%;
height: 48px;
padding: 0;
background: #535353;
}
footer ul {
margin: 0;
padding: 0;
list-style-type: none;
}
footer ul li {
float: left;
padding: 5% 10.9%;
background: url(./img/tabs.png) top left no-repeat;
}
footer ul li a {
width: 100%;
height: 100%;
color: #fff;
text-decoration: none;
}
footer ul li a .current {
background: url(./img/tabs.png) bottom left no-repeat;
}
here is my html
<header>
Header
</header>
<section id="wrapper">
<div id="scroll-content">
</div>
</section>
<footer>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Profile</a></li>
<li><a href="#">Photo</a></li>
</ul>
</footer>