css placing icon for mobile web app - html

Question

I am trying to place icons for mobile web app using css.
However I am having some problem with this.
I set outer box and placed icon there which I thought would be good for different devices since they have different size
Below is my code but I am not seeing the icons
Am I missing anything here?
This is my html
<link rel="stylesheet" type="text/css" href="/mobile_pages/main/main_page.css"/>
<br>
<div id="siteMenu">
</div>
This is my css
#siteMenu{
position: relative;
width: device-width;
height: device-height;
}
.icon{
background-size: cover;
width: 80px;
height: 80px;
}
#intro_icon{
position: absolute;
background-image: url('intro_icon.png');
top: 50px;
left: 0px;
}
#direction_icon{
position: absolute;
background-image: url('direction_icon.png');
top: 50px;
left: 90px;
}
#pic_icon{
position: absolute;
background-image: url('pic_icon.png');
top: 50px;
left: 180px;
}
when I give specific px for width and height in #siteMenu, I can see the icon.
However, I want it to be device width and device height.
I tried 100%, auto value for width and height but still didn't work.
what should I do here?

Answer 1

Just tried your code in jsFiddle, with google logo, it is working fine.
Can you make sure the path of your icons is right, so in the same folder as your CSS?
Make sure the ccs file is well referenced, and the < link> tag must be in the < head> tag of your page?
#intro_icon{
position: absolute;
background-image: url('http://upload.wikimedia.org/wikipedia/commons/8/87/Google_Chrome_icon_(2011).png');
top: 50px;
left: 0px;
}
for device-width and device-height, they are media-query parameters not css attributes. Also you need to set up html and body tag full page :
html{
width: 100%;
height: 100%;
}
body{
min-height:100%;
padding:0px;margin:0px;
}
#siteMenu{
position: relative;
width: 100%;
height: 100%;
height: 100vh;
min-height:100%;
}
JsFiddle, Note that vh is not supported by all browsers (e.g IE8)