Responsywne tło diva, wysuwające się menu - kilka pytań

Witam wszystkich,

buduję niewielką stronę i napotkałem kilka problemów.
Pierwszy z nich to tło w divie. Chodzi mi o to, aby ten div .maincontent był wypełniony obrazkiem. Co więcej, chcę aby zawsze miał szerokość 100% całej strony oraz razem ze zwiększaniem się okna przeglądarki automatycznie rosła jego wysokość aż osiągnie wysokość załóżmy 500px.

Po drugie, chciałbym aby ten div z tekstem "SPRAWDŹ NAS" był zawsze na środku diva maincontent oraz wyrównany do prawej strony.

Trzecia sprawa, moja wysuwana nawigacja (tworzona w oparciu o filmik Damiana Wielgosika) nie działa tak jak chcę. Otóż chciałbym aby wysuwając się w dół 'spychała' div który jest pod nią.

Liczę także na wasze komentarze dotyczące ogólnych błędów na stronie. Pozdrawiam.

<!DOCTYPE HTML>
<html lang="pl">
   <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width">
      <meta name="author" content="Sebastian Kopiczko">
      <title>Biała Perła Augustów</title>
      <link rel="shortcut icon" href="k1.ico"/>
      <meta name="description" content="Bar, przystań, wypożyczalnia - BIAŁA PERŁA AUGUSTÓW"/>
      <meta name="keywords" content="biała perła, augustów, biała, perła, przystań, bar, wypożyczalnia, pływanie na byle czym, biala, perla"/>
      <link href='https://fonts.googleapis.com/css?family=Raleway:200&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
      <link href='https://fonts.googleapis.com/css?family=Libre+Baskerville:400,700&subset=latin-ext,latin' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="css/fontello.css" type="text/css"/>
      <link rel="stylesheet" href="style.css" type="text/css"/>
      <script type="text/javascript" src="jquery-2.2.2.min.js"></script>
      <script type="text/javascript" src="jquery.sticky.js"></script>
      <script>
         $(window).load(function(){
           $("#header").sticky({ topSpacing: 0 });
         });
      </script>
   </head>
   <body>
         <header class="page-header">
               <a href ="index.html" title="Powrót na stronę główną"><img src="logo.png"/></a>

            <nav class="page-nav">
               <ul class="navigation-menu">
                  <li><a href="index.html" title="Strona główna">Strona główna</a></li>
                  <li><a href="onas.html" title="Dowiedz się więcej">O nas</a></li>
                  <li><a href="oferta.html" title="Sprawdź naszą ofertę">Oferta</a></li>
                  <li><a href="kontakt.html" title="Skontaktuj się z nami">Kontakt</a></li>
               </ul>
			   <button class="hamburger" title="Otwórz menu" aria-label="navigation menu">
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="35" height="12" viewBox="0 0 35 12" class="hamburger-icon"><path d="M-0.000,12.000 L-0.000,8.000 L35.000,8.000 L35.000,12.000 L-0.000,12.000 ZM-0.000,0.000 L35.000,0.000 L35.000,4.000 L-0.000,4.000 L-0.000,0.000 Z"/></svg>
					<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid" width="28.312" height="27.594" viewBox="0 0 28.312 27.594" class="close-icon"><path d="M28.298,2.831 L16.984,14.145 L27.591,24.751 L24.763,27.580 L14.156,16.973 L3.549,27.580 L0.721,24.751 L11.328,14.145 L0.014,2.831 L2.842,0.003 L14.156,11.316 L25.470,0.003 L28.298,2.831 Z"/></svg>
				</button>
            </nav>			
         </header>
		<main>
		<div class="maincontent">
            <div class="check"><a href="onas.html">SPRAWDŹ NAS!</a></div>
		</div>
		</main>
		
         <footer class="page-footer">
            <div id = "fottertext">&copy; 2016 Biała Perła Augustów.</div>
         </footer>
		<script>
			var hamburger = document.querySelector(".hamburger");
			hamburger.addEventListener("click", function () {
			var isExpanded = hamburger.getAttribute("aria-expanded");
			console.log(isExpanded);
			if (isExpanded === "false") {
			document.querySelector(".page-header").classList.add("nav-opened");
			hamburger.setAttribute("aria-expanded", "true");
			} else {
			document.querySelector(".page-header").classList.remove("nav-opened");
			hamburger.setAttribute("aria-expanded", "false");
		  }
			}, false);
			hamburger.setAttribute("role", "button"); 
			hamburger.setAttribute("aria-controls", "navigation");
			hamburger.setAttribute("aria-expanded", "false");
			document.body.classList.add("js");
		</script>
   </body>
</html>

*{box-sizing:border-box;}

html 
{
    position: relative;
    min-height: 100%;
	font-size: 62.5%;
}

body
{
	font-family: 'Libre Baskerville', serif;
	color: #000000;
	background-color: #FFFFFF;
	margin: 0 !important;
	margin-bottom: 50px;
}

#wrapper
{
	width: 100%;
	min-height: 100%;
	background-color: #FAFAFA;
}

.page-header
{
	margin: auto;
	width: 100%;
	height: 130px;
	background-color: #FAFAFA;
	box-sizing: border-box;
	padding-top: 15px;
	box-shadow: 3px 3px 2.5px #AAAAAA;
}
.page-nav 
{
	background-color: #FAFAFA;
}
.page-nav .hamburger
{
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 20px;
	height: 30px;
	width: 30px;
	overflow: hidden;
	background: 0;
	border: 0;
	width: 35px;
	height: 35px;
}

.page-nav .hamburger .hamburger-icon
{
	width: 33px;
	height: 17px;
}


.page-nav .hamburger .close-icon
{
	display: none;
	width: 1.4rem;
}

.nav-opened .hamburger .close-icon 
{
	display: inline-block;
	fill: #000000;
}

.nav-opened .hamburger .hamburger-icon 
{
	display: none;
}


.page-nav .navigation-menu
{
	list-style: none;
	padding: 0;
	margin: 0;
	width: 100%;
	/*display: none;*/
	text-align: center;
}

.page-nav .navigation-menu li a
{
	color: #000000;
	text-decoration: none;
	font-size: 1.5rem;
}

.page-nav ul {
  list-style: none;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
  opacity: 0;
  transition: opacity 1s;
  pointer-events: none;
}

.page-nav ul li {
  padding: 5px;
  padding-bottom: 15px;
  padding-top: 15px;
  border-bottom: 1px solid #DDDDDD;
  font-size: 1.4rem;
}

.page-nav ul li a {
  text-decoration: none;
  color: #37474F;
  padding: 12px;
}

.nav-opened {
  background-color: #FAFAFA;
}

.nav-opened .page-nav {
  display: block;
}

.nav-opened .page-nav ul {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.page-footer
{
    width: 100%;
	height: 50px;
	background-color: #303030;
	box-shadow: 3px 3px 2.5px grey;
	position: absolute;
    left: 0;
    bottom: 0;
}

#fottertext
{
	margin: auto;
	width: 80.5%;
	color: #a6a6a6;
	font-size: 1.2rem;
	text-align: left;
	padding: 17.5px;
}

.content
{
	background-color: #000000;
	color: #FFFFFF;
}

.maincontent
{	
	background-image: url("1.jpg");
	background-repeat: no-repeat;
	width: 100%;
	background-size:100% 100%;
	margin: 2rem auto;
	min-height: 100%;
	display: block;
	height: 30rem;
}

.check a
{
	color: #FAFAFA;
	text-decoration: none;
	letter-spacing: 1mm;
	font-family: 'Raleway', sans-serif;
	font-size: 2.1rem;
}

.check
{
	border: 2px solid #303030;
	opacity: 0.4;
	filter: alpha(opacity=40); /*Dla IE8 i wcześniej*/
	position: absolute;
	right: 4%;
	width: 22rem;
	margin-top: 40%;
	text-align: center;
	line-height: 4.5rem;
}

.check:hover
{
	opacity: 1;
	filter: alpha(opacity=100); /*Dla IE8 i wcześniej*/
	cursor: pointer;
}