show image properly even in mobile view too

Question

Here the code of HTML and CSS with bootstrap how to fix the bug to show image properly even in mobile view too

#one{
padding-top:6.5%;
opacity:10;
padding-left:1%;
padding-right:1.5%;
padding-bottom:1%;
background-image:url(https://ak9.picdn.net/shutterstock/videos/4872389/thumb/1.jpg);
background-size:355px 122px;
background-repeat: no-repeat;
margin:2%;
width:42%;
text-align: center;
/*background-color:#d32f2f;*/
/*background-color:royalblue;*/
border-color:white;
color:purple;
font-size-adjust:initial;
border-color:#e0e0e0;
background-origin:border-box;
}
#one:hover{
transform: scale(1.3);
}
#two{
opacity:10;
padding-top:6.5%;
padding-left:1%;
/*color:#000000;*/
color:purple;
padding-right:.5%;
padding-bottom:1%;
background-image:url(https://www.3mediaweb.com/wp-content/uploads/SEO-for-Local-Search-Think-Like-a-Customer-01-1170x662.jpg);
background-size:355px 122px;
background-repeat: no-repeat;
margin:2%;
width:42%;
text-align: center;
font-size-adjust:initial;
border-color:#e0e0e0;
background-origin:border-box;
}
#two:hover{
transform: scale(1.3);
}
#three{
opacity:10;
padding-top:6.5%;
padding-left:1.5%;
padding-right:1.5%;
color:purple;
padding-bottom:1%;
background-image:url(https://4.imimg.com/data4/LI/XC/MY-15020461/we-are-loan-agency-from-looking-for-more-business-associate-500x500.jpg);
background-size:355px 122px;
background-repeat: no-repeat;
margin:2%;
width:42%;
border-color:#e0e0e0;
/*background-color: #ffd600;*/
}
#three:hover{
transform: scale(1.3);
}
#four{
opacity:10;
margin:2%;
color:purple;
width:42%;
padding-top:6.5%;
padding-left:1.5%;
padding-right:1.5%;
padding-bottom:1%;
background-image:url(http://www.courseuniv.com/course-images/9.png);
background-size:355px 122px;
background-repeat: no-repeat;
border-color:#e0e0e0;
/*background-color: #b2ff59;*/
}
#four:hover{
transform: scale(1.3);
}
#five{
margin:2%;
opacity:10;
margin-left:28%;
padding-top:6.5%;
color:purple;
padding-left:.5%;
padding-right:.5%;
padding-bottom:1%;
background-image:url(https://www.10wallpaper.com/wallpaper/1366x768/1606/Internet_Business_Technology_HD_Wallpaper_14_1366x768.jpg);
background-size:355px 122px;
background-repeat: no-repeat;
width:42%;
border-color:#e0e0e0;
/*background-color:#ffab91;*/
}
#five:hover{
transform: scale(1.3);
}
#ones {
margin-top:70px;
font-family:Lucida Handwriting;
font-size:13px;
font-weight:600;
}
#twos {
margin-top:70px;
font-family:Lucida Handwriting;
font-size:13px;
font-weight:600;
}
#threes {
margin-top:70px;
font-family:Lucida Handwriting;
font-size:13px;
font-weight:600;
}
#fours {
margin-top:70px;
font-family:Lucida Handwriting;
font-size:13px;
font-weight:600;
}
#fives {
margin-top:70px;
font-family:Lucida Handwriting;
font-size:13px;
font-weight:600;
}

<form id="form1" runat="server">
<div class="col-lg-2 col-xs-0"></div>
<div class="col-lg-9 col-md-4 col-sm-6" >
<div id="total">
<a href="CustomerNew.aspx" class="btn btn-lg" role="button" id="one"><div id="ones">New Customer</div></a>
<a href="CustomeSearchPage.aspx" class="btn btn-lg" role="button" id="two"><div id="twos">Search Customer</div></a>
<a href="CustomeSearchPage.aspx" class="btn btn-lg" role="button" id="three"><div id="threes">New Loan</div></a>
<a href="Report1.aspx" class="btn btn-lg" role="button" id="four"><div id="fours">Reports</div></a>
<a href="#" class="btn btn-lg" role="button" id="five"><div id="fives">Admin</div></a>
</div>
</div>
<div class="col-lg-1" id="thi"></div>
</form>

In mobile view, its showing hawked

 

In desktop view its view good