CSS troubles with background image

Hi, I have my clients site here, there are several sections and at the last one is applied background (picture of grass with mashrooms and lighthouse), but when it comes to responsiveness of the site, it's making a troubles, first it's not wide enough and on the smallest one it's not height enough. Could somebody help me to solve this problem? It has to be visible whole, 100% width, on the very bottom of the page.

CSS used for now:

.footer {
  background: url('img/footer.png') no-repeat bottom center;
  padding-top: 30px;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}