show image properly even in mobile view too

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 Customerdiv>a>
<a href="CustomeSearchPage.aspx" class="btn btn-lg" role="button" id="two"><div id="twos">Search Customerdiv>a>
<a href="CustomeSearchPage.aspx" class="btn btn-lg" role="button" id="three"><div id="threes">New Loandiv>a>
<a href="Report1.aspx" class="btn btn-lg" role="button" id="four"><div id="fours">Reportsdiv>a>
<a href="#" class="btn btn-lg" role="button" id="five"><div id="fives">Admindiv>a>
div>
div>
<div class="col-lg-1" id="thi">div>
form>

In mobile view, its showing hawked

In desktop view its view good