I am currently dealing with a website template that has a background image in the wrapper. However, when I view the site on a 13" laptop screen, the text extends below the fold because the wrapper only covers above the fold. This results in my content not being displayed properly.
Is there a way for me to address this issue and ensure that my content fits neatly above the fold?
JSFiddle Link: http://jsfiddle.net/L72wwz7g/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>COMPANYNAME Photo Contest</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<link href="css/style.css" rel="stylesheet" />
<link href="css/colors/style-color-01.css" rel="stylesheet" />
<link rel="stylesheet" href="css/contact.css" />
<link rel="stylesheet" href="css/simple-line-icons.css" />
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrapper">
<!-- Start Header -->
<div id="header">
<div class="container">
<div class="row">
<div class="span12">
<h1>
<a href="#">
<img src="images/logo.png" alt="COMPANYNAME" />
</a>
</h1>
<h2 class="menulink">
<a href="#">Menu</a>
</h2>
<!-- Start Menu -->
<div id="menu">
<ul>
<li>
<a href="index.html">HOME</a>
</li>
<li>
<a href="#categories">PHOTO CATEGORIES</a>
</li>
<li>
<a href="#tips">PHOTOGRAPHY TIPS</a>
</li>
<li>
<a href="#rules">CONTEST RULES</a>
</li>
<li class="current">
<a href="https://COMPANYNAME.wufoo.com/forms/COMPANYNAME-photo-contest/" target="_blank">ENTRY FORM</a>
</li>
</ul>
</div>
<!-- End Menu -->
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- End Header -->
<!-- Start Content -->
<div class="container">
<div class="row">
<div class="span6">
<div class="inner">
<br />
<br />
<br />
<br />
<br />
<br />
<center>
<h1 style="color: #464f56">SHOW US YOUR
<b>BEST BEFORE AND AFTER</b> PHOTOS AND
<b>WIN PRIZES</b> IN THE COMPANYNAME PHOTO CONTEST</h1>
...
</html>