html - 在 CSS 中添加背景图片的正确方法是什么？

Question

我想在一个全宽的部分中添加背景图片。但我无法弄清楚使用 background-image 在 CSS 中添加图像的正确方法是什么。

所以，这是我的代码:

HTML

<section id="main-banner">
 <div class="banner">               
  <h1>This H1 title</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque at tempor turpis. Suspendisse mattis, est eget volutpat elementum, lacus odio euismod ipsum, a placerat ligula mi ut nibh. In vitae leo facilisis, accumsan massa ultrices,</p>
 </div>
</section>

CSS

#main-banner { 
  background: url('../img/banner-img.png') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我的图片显示不正确。

Answer 1

试试这个

#main-banner { 
background: url('../img/banner-img.png') no-repeat center center; 
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
min-height:300px;
}