Floating image between div and span - html

Question

How can I float the image of the modem as shown below, to be above the span below it. I have used Div for the label and span for the contents, however this can be changes to suit. see my code below.
Image:
Code:
<style>
#primary_modem_label{
position: absolute;
width: 100%;
height: 15%;
background-color: black;
background-image:url(/assets/Billion7800NX.png);
background-size: 30px; /* <------ */
background-repeat: no-repeat;
background-position: left center;
font-family:arial;
font-size: 1.2vw;
color:white;
}
.primary_modem_class{
position: relative;
float: left;
width: 30%;
font-size: 2.5vw;
margin:0.2%;
background: #aaaaaa;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="assets/jqm-icon-pack-3.0.0-fa.css">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
<div id="page" data-role="page" data-theme="a" data-url="page" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 628px;">
<div data-role="header" data-position="inline" data-theme="d" data-backbtn="false" class="ui-header ui-bar-d" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">QKradio Monitor</h1></div>
<div class="primary_modem_class" id="primary_modem_stable_div">
<div id="primary_modem_label">&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspPrimary Modem</div>
<span class="font1"><br>Down Link: </span>
<span id="local_primary_connection_adsl_down_speed" class="font5">updating</span>
<span class="font1"><br>Up Link: </span>
<span id="local_primary_connection_adsl_up_speed" class="font4">updating</span>
<span class="font1"><br>Current Up speed: </span>
<span id="primary_upload_speed" class="font4">updating</span>
<span class="font1"><br>Uptime: </span>
<span id="local_primary_connection_uptime" class="font4">updating</span>
</div>

Answer 1

Why can't use img tag instead of background-image like the below?
Also,please use text-align to align the "Primary modem" in the center instead of using &nbsp
<style>
#primary_modem_label{
position: absolute;
width: 100%;
height: 15%;
font-family:arial;
font-size: 1.2vw;
color:white;
background-color:black;
text-align:center;
}
.primary_modem_class{
position: relative;
float: left;
width: 30%;
font-size: 2.5vw;
margin:0.2%;
background: #aaaaaa;
overflow:hidden;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.3.1.css">
<link rel="stylesheet" href="assets/jqm-icon-pack-3.0.0-fa.css">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="shortcut icon" href="/favicon.ico">
<div id="page" data-role="page" data-theme="a" data-url="page" tabindex="0" class="ui-page ui-body-a ui-page-active" style="min-height: 628px;">
<div data-role="header" data-position="inline" data-theme="d" data-backbtn="false" class="ui-header ui-bar-d" role="banner">
<h1 class="ui-title" role="heading" aria-level="1">QKradio Monitor</h1></div>
<div class="primary_modem_class" id="primary_modem_stable_div">
<div id="primary_modem_label"><img src="w3css.gif" align="left"/> Primary Modem</div>
<span class="font1"><br>Down Link: </span>
<span id="local_primary_connection_adsl_down_speed" class="font5">updating</span>
<span class="font1"><br>Up Link: </span>
<span id="local_primary_connection_adsl_up_speed" class="font4">updating</span>
<span class="font1"><br>Current Up speed: </span>
<span id="primary_upload_speed" class="font4">updating</span>
<span class="font1"><br>Uptime: </span>
<span id="local_primary_connection_uptime" class="font4">updating</span>
</div>

Answer 2

use the tag and write the path on the src attribute... then, you have 2 options, put the img (html) before whatever you want to be on top, and/or use z-index in css or style attribute to make the image come to top.