CSS背景图片不适应屏幕尺寸

我是一个比较新的HTML/CSS。我已经开始开发一个网站，但我的主要“英雄”形象不适合较小的页面并留下空白区域。如果你能帮助我诊断问题，将不胜感激。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>

该网站还可以查看Here

来源

2015-05-06 InsidiousFM

'＃style'中有两个'background-size'属性;你想保留哪一个？此外，“背景位置”看起来可疑;你确定这就是你想要的吗？ –

第一个背景声明也看起来不太洁净。我可能是错的，但我相信URL（..）语句后应该没有分号。 – Ideogram

background-position：cover;不要设置宽度或高度的BG - 图像...应该是好的 – Careen

这是我会怎么做到这一点：

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%; 
}

HTML

<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>

例子：CodePen

你会发现，无论你多么大或小规模的页面（因此部分），图像将始终填充母容器。

来源

2015-05-06 16:59:33

CSS背景图片不适应屏幕尺寸

回答

相关问题