How to fix a footer in webpage?and also adding resize event for an image

Question

I've to display a footer such that the address is displayed in the center of the footer and the facebook icon and copyright is in line but at right corner of the footer.

.footer-wrapper {
  position: fixed;
  bottom: 0;
  width: 100%;
  margin-top: 0;
  padding: 1em;
  background-color: #eebd0d;
  color: #f2f1e6;
  border-top: 3px solid #030000;
  font-size: 12px
}
.footer {
  text-align: right
}
.footer a {
  color: #c4960c
}
.footer-gambling-hotline {
  font-size: .75em;
  padding-top: 20px
}
.footer-copyright {
  font-size: .75em
}

<div id="footer_wrapper_casino" class="footer-wrapper">
  <section class="footer">
    <center> 
      <font size="2">address</font> 
    </center>
    
    <div class="social-media-block" style="margin-bottom:20px;" align="right">
      <a href="https://www.facebook.com/" target="_blank">
        <img width="32" height="32" src="images/casino_fb.png" alt="Casino   Facebook" />
      </a>
      <br/>&copy; casino. All rights reserved.
    </div>
</div>

My second query is I've to fix an background image such that when the window is resized the image auto adjusts to it. I need help in writing eventlistener function.

<div id="main-content" class="col-lg-10 col-md-9 col-sm-8 col-sx-12 main-content full-height"> 
<div class="col-xs-12 col-md-6 col-lg-4"> 
    <img src="images/homebg.jpg" height="auto" width="1186" alt="Casino Booking"/> 
</div>

This website was already designed, I'm asked to make some changes as I am new to web designing its taking me time to understand.