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背景圖片不適應屏幕尺寸

回答

相關問題