I have a calendar div that I want to customize with a background image and text. How can I achieve this?
https://i.sstatic.net/hVQm2.jpg
Here is my code:
.calenderArrivalDiv{
margin-top: 15%;
margin-bottom: 1%;
background-image: url("images/SearchReservation/search_button_u754.png");
text-align: center;
background-repeat: no-repeat;
padding-left: 0%;
padding-right: 12%;
}
.calenderDepDiv{
margin-top: 14%;
margin-bottom: 2%;
background-image: url("images/SearchReservation/search_button_u754.png");
text-align: center;
background-repeat: no-repeat;
}<div class="col-xs-1 col-sm-1 col-md-1">
<div id="arrivalDate" class="calenderArrivalDiv calanderSize"
ng-click="searchReservationVm.arrivalDtOpen($event)">
<span>
<button tabindex="4" class="dateSearchBar btn-primary" id="one"
datepicker-popup="{{'MMM d'}}"
ng-model="searchReservationVm.searchRQ.arrivalDate"
is-open="searchReservationVm.arrivalDtOpened"
ng-change="searchReservationVm.arrivalDateChange()"
datepicker-options="dateOptions"
show-weeks="false"
current-text="Reset To Today's Date"
ng-focus="searchReservationVm.arrivalDtOpen($event)">
<div class="text calFontDate" title="Select Arrival Date">
{{ searchReservationVm.searchRQ.arrivalDate | date : 'MMM' }}</br>
<div class="datediv">
{{ searchReservationVm.searchRQ.arrivalDate | date : 'd' }}
</div>
</div>
</button>
</span>
</div>
</div>