我一直致力于为我的投资组合设计一些媒体响应式设计，而且它很好但我有一个问题。我在主屏幕和平板显示器上的图像（调整大小以查看平板电脑显示）都设置为背景大小包含。我这样做是因为我不喜欢我的图像被拉伸以适应div，但现在我的页面底部有一个巨大的间隙。（在较小的平板电脑屏幕和家用桌面屏幕上）。有没有办法可以保持图像的原样并消除底部间隙？
这是我的代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" media="screen" href="home.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<title>Tavyon Richardson</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" >
</head>
<body>
<div id="wrapper">
<header>
<ul class="icon">
<li class="h1">Tavyon <span class="name">Richardson</span></li>
<li class="list">TavyonRichardson@yahoo.com<i class="material-icons">mail_outline</i></li>
<li class="list">989-285-5133<i class="material-icons">call</i></li>
<li class="list">Alma, Michigan<i class="material-icons">location_on</i></li>
</ul>
</header>
<div id="background">
<p class="web"><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my my recent projects and resume.</p>
<nav id="navbar">
<ul class="nav">
<li class="stretch"><a href="">About me</a></li>
<li class="stretch"><a href="">Courses</a></li>
<li class="stretch"><a href="http://tavyonrichardson.com/projects.html">Projects</a></li>
<li class="stretch"><a href="http://tavyonrichardson.com/nms_114/blog">Blog</a></li>
<li class="stretch"><a href="">Resume</a></li>
</ul>
</nav>
</div>
<div class="mback">
<p class="mobile"><span>Hey!</span>Welcome to my webiste. Here, you can see everything from my life story, to my my recent projects and resume.</p>
</div>
</div>
</body>
</html>
CSS：
@import url('https://fonts.googleapis.com/css?family=Fjalla+One');
@import url('https://fonts.googleapis.com/css?family=Titillium+Web');
@import url('https://fonts.googleapis.com/css?family=Fira+Sans');
@import url('https://fonts.googleapis.com/css?family=Lobster');
@import url('https://fonts.googleapis.com/css?family=Overlock');
*{
margin: 0 ;
padding: 0;
}
#wrapper {
margin: 0 auto;
padding: 0;
}
#background {
display: block;
background-image: url(images/Untitled-1.jpg);
background-repeat:no-repeat;
background-size:contain;
overflow: auto;
height: 100%;
width: 100%;
}
header{
background: rgb(115, 78, 116);
width: auto;
padding: 1%;
}
.web{
width: 20%;
font-size: 20px;
color: antiquewhite;
padding: 0;
margin: 0 auto;
position:absolute;
margin-left: 50%;
font-family: 'Overlock', sans-serif;
font-style: normal;
margin-top: 15%;
}
.mobile, .mback{
display: none;
}
}
.icon{
list-style-type: none;
display: inline;
}
.list{
display: inline-block;
font-family: 'Fira Sans', sans-serif;
margin-right: 1%;
}
i{
display: inline;
}
body {
background-color: black;
margin: 0;
padding: 0;
}
footer{
color: antiquewhite;
margin: 0;
padding: 0;
}
.h1{font-family:'Fjalla One', sans-serif;
color: floralwhite;
font-size: 300%;
display: inline;
padding-right: 300px;
font-weight: bolder;
}
.name{font-family:'Lobster', sans-serif;
color: floralwhite;
display: inline;
font-weight: normal;
}
nav {
float: right;
}
.stretch{
list-style-type: none;
padding: 20px;
margin: 20px 0px;
border-radius: 50px 0px 0px 50px;
width: 250px;
height: 50px;
text-align: center;
text-shadow: 2px 2px black;
font-size: 150%;
font-family: 'Fjalla One', sans-serif;
background-color: rgb(40, 31, 17);
position: relative;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px transparent;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
}
.stretch:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50px 0px 0px 50px;
background:rgb(91, 56, 29);
-webkit-transform: scaleX(0);
transform: scaleX(0);
-webkit-transform-origin: 100% 50%;
transform-origin: 100% 50%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
a:link,a:visited, a:hover,a:active {
text-decoration: none;
color: antiquewhite;
}
.stretch:hover:before, .stretch:focus:before, .stretch:active:before {
-webkit-transform: scaleX(1);
transform: scaleX(1);
-webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
/* ----------- Galaxy S4 ----------- */
/* Portrait and Landscape */
@media screen
and (device-width: 320px)
and (device-height: 640px)
{
}
/* ----------- tablet ----------- */
/* Portrait and Landscape */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/*changing nav to horizontal postion*/
nav, nav ul, nav li, nav a{
display: inline;
float: none;
width: 100%;
margin: 0px auto;
padding: 0px;
text-align: center;
}
.stretch{
display: inline-block;
list-style-type: none;
padding: 10px;
margin:0px 0px 0px 0px;
border-radius: 0px 0px 0px 0px;
width:auto;
height: auto;
text-align: center;
text-shadow: 2px 2px black;
font-size: 100%;
font-family: 'Fjalla One', sans-serif;
background-color: rgb(40, 31, 17);
position: static;
/* removing nav animation*/
-webkit-transform: none;
transform:none;
-webkit-transform-origin:none;
transform-origin:none;
-webkit-transition-property: none;
transition-property: none;
-webkit-transition-duration: none;
transition-duration: none;
-webkit-transition-timing-function: none;
transition-timing-function: none;
}
.stretch:hover:before, .stretch:focus:before, .stretch:active:before {
-webkit-transform: none;
transform: none;
-webkit-transition-timing-function: none;
transition-timing-function: none;
}
.stretch:before {
content: "";
position: none;
z-index: none;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50px 0px 0px 50px;
background:none;
-webkit-transform: scaleX (none);
transform: scaleX(none);
-webkit-transform-origin: none;
transform-origin: none;
-webkit-transition-property: none;
transition-property: none;
-webkit-transition-duration:none;
transition-duration: none;
-webkit-transition-timing-function: none;
transition-timing-function: none;
}
/* adding nav background back instead of image*/
#background {
background-color: rgb(40, 31, 17);
width: 100%;
background-image: none;
}
/*trying to get the background to display correctly*/
body {
background-color: black;
margin: 0;
padding: 0;
}
.mback{
border: 2px solid red;
display: block;
background-image: url(images/Untitled-1.jpg);
background-repeat: no-repeat;
background-size: contain;
width: auto;
height: 900px;
margin: 0 auto;
padding: 0;
}
/*moving the paragraph to the left since image will not display*/
.web{
display: none;
}
.mobile {
text-align: right;
display: block;
width: 20%;
font-size: 20px;
color: antiquewhite;
padding: 0;
margin: 0 auto;
font-family: 'Overlock', sans-serif;
font-style: normal;
position: static;
float: right;
}
}