Html CSS背景图像不适应屏幕大小

我是HTML/CSS方面的新手。我已经开始开发一个网站，但我的主要“英雄”形象不能适应较小的页面，留下了空白。如果你能帮我诊断这个问题，我将不胜感激

*/css*/

#intro {
    z-index: 100;
    width: 100%;
    height: 66%;
    background: url("../images/intro2.jpg"); center center no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    top:10%;
    background-position: 0px -150px;
    left: 0;
    position: absolute;
    background-size: 100%;
}
#intro .wrap{
    margin: 0 auto;
    position: relative;
}
#intro .content{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

*/html*/

<section id="intro">
    <div class="wrap">
        <div class="content">
        <h1 id="welcome"> Your number one choice for music <br> in the south coast </h1>
        </div>
    </div>
</section>

您在南海岸的首选音乐

---

也可以查看该网站

这就是我将如何完成的：

CSS

HTML

例如：

---

您会注意到，无论您缩放页面（以及相应的部分）有多大或多小，图像都会展开以填充父容器。

您在

#style

中有两个

背景大小属性；你想保留哪一个？而且，
背景位置
看起来可疑；你确定这就是你想要的吗？第一个背景陈述看起来也不太符合犹太教义。我可能错了，但我相信url（…）语句后面不应该有分号；不要设置bg图像的宽度或高度。。。也可以将south coast更改为不同颜色的文本，看不见它…查看@media查询以获得css@卡伦色？什么颜色？
html,body{
  margin:0;
  height:100%;
}

.section{
  width:100%;
  height:100%;
  display:block;
  float:left;
  position:relative;
  overflow:hidden;
  background:purple;
}

.section img{
    position:absolute;
    top:50%;
    min-height:100%;
    display:block;
    left:50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    min-width:100%;  
}

<div class="section">
   <img src="http://th02.deviantart.net/fs42/PRE/f/2009/133/a/0/Rainy_Landscape_STOCK_by_wyldraven.jpg"/>
</div>
<div class="section">
</div>